scroll-behavior:smooth
写在滚动容器元素上,可以让容器(非鼠标手势触发)的滚动变得平滑。
四、JS平滑滚动向下兼容处理
JS实现平滑滚动并不难,jQuery中animate()
方法:
scrollContainer.animate({ scrollTop: 0 });
或者使用requestAnimationFrame API这类原生JS也能实现。例如下面这个我速写的个方法:
/** @description 页面垂直平滑滚动到指定滚动高度 @author zhangxinxu(.com) */ var scrollSmoothTo = function (position) { if (!window.requestAnimationFrame) { window.requestAnimationFrame = function(callback, element) { return setTimeout(callback, 17); }; } // 当前滚动高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 滚动step方法 var step = function () { // 距离目标滚动距离 var distance = position - scrollTop; // 目标滚动位置 scrollTop = scrollTop + distance / 5; if (Math.abs(distance) < 1) { window.scrollTo(0, position); } else { window.scrollTo(0, scrollTop); requestAnimationFrame(step); } }; step(); };
使用的是自己私藏缓动动画JS小算法,滚动先快后慢。
使用如下,例如,我们希望网页平滑滚动到顶部,直接:
scrollSmoothTo(0);
就可以了。
难的是如何支持平滑滚动的浏览器原生处理,不支持的浏览器还是使用老的JS方法处理。
我是这么处理的JS如下判断:
if (typeof window.getComputedStyle(document.body).scrollBehavior == 'undefined') { // 传统的JS平滑滚动处理代码... }
这样就可以无缝对接了。