FED实验室 - 专注WEB端开发和用户体验

煦涵说CSS:scroll-behavior实现页面平滑滚动

煦涵说 煦涵 348℃ 0评论

号外!!!Chrome 61 已经支持scroll-behavior属性,该属性指定滚动框(scrolling box)的滚动行为,当滚动行为由浏览器或者是CSSOM API发出时(例如点击锚点之后进行跳转)就会触发这个属性,但如果是用户滚动滚动条等操作时并不会触发这个属性。 当我们在根元素上使用该属性时,该属性会作用于 viewport 上。Demo直达

body 元素上使用 scroll-behavior 不会冒泡到 viewport 上。

煦涵说CSS:scroll-behavior实现页面平滑滚动

scroll-behavior可取值

div {
    scroll-behavior: [auto | smooth];
}

auto

默认值,滚动框以即时方式滚动

smooth

滚动框以平滑的方式滚动,使用 user-agent-defined 的定时函数在 user-agent-defined 定义的时间内滚动,如果有 user-agent 应该遵循平台约定。

浏览器兼容性

  • Chrome 61+
  • Friefox 36+

javascript实现滚动

auto

window.scrollTo(x, y);

smooth

使用 window.setTimeout()window.setInterval() 或者 window.requestAnimationFrame() 分片滚动,以实现平滑效果。

let scrollTo = function (position, timeout) {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
        direction = position - scrollTop > 0 ? 1 : -1,
        distance = Math.abs(position - scrollTop),
        split = distance / 50,
        _timeout;

    if (position !== scrollTop) {
        timeout = timeout || 1000;
        split *= direction;

        _timeout = setInterval(function () {
            scrollTop += split;
            distance -= Math.abs(split);
            if (0 >= distance) {
                window.scrollTo(0, position);
                clearInterval(_timeout);
                _timeout = null;
            } else {
                window.scrollTo(0, scrollTop);
            }
        }, timeout / 100);
    }
};

感谢您的阅读

EOF

作者[煦涵]

2017年09月26日

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持 喜欢 (2)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址