CSS 的 scroll-behavior 属性可以实现页面平滑滚动。目前 Chrome 61 浏览器已经全面支持 scroll-behavior 属性了。本文将使用 scroll-behavior 属性实现一个页面平滑滚动的案例。
更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏
scroll-behavior 属性可以指定滚动框(scrolling box)的滚动行为，当滚动行为由浏览器或者是 CSSOM API 发出时（例如点击锚点之后进行跳转）就会触发这个属性，但如果是用户滚动滚动条等操作时并不会触发这个属性。 当我们在根元素上使用该属性时，该属性会作用于 viewport 上。
scroll-behavior 可取值
div { scroll-behavior: [auto | smooth]; }
- auto：默认值，滚动框以即时方式滚动
- smooth：滚动框以平滑的方式滚动，使用 user-agent-defined 的定时函数在 user-agent-defined 定义的时间内滚动，如果有 user-agent 应该遵循平台约定。
注意：body 元素上使用 scroll-behavior 不会冒泡到 viewport 上。
浏览器兼容性
- 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); } };
关于 scroll-behavior 属性的相关 demo，大家可以到 github 上观看源码和演示。
本文原文出处：web 前端中文站： » scroll-behavior 在 Chrome 61 实现页面平滑滚动
【注：本文源自网络文章资源，由站长整理发布】
