• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

scroll-behavior在Chrome 61实现页面平滑滚动

JAVA web前端中文站 2年前 (2017-09-29) 1728次浏览 已收录 0个评论

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 在 Chrome 61 实现页面平滑滚动

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 实现页面平滑滚动

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:scroll-behavior 在 Chrome 61 实现页面平滑滚动
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

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

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