scroll滚动事件兼容和polyfill

最新推荐文章于 2024-07-29 11:53:27 发布

带脑子的CV工程师

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量483

点赞数

分类专栏： js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_36262295/article/details/129466717

版权

js 专栏收录该内容

98 篇文章 1 订阅

订阅专栏

接口API

滚动事件有这些API，

window.scroll()
Element.scroll()
window.scrollTo()
Element.scrollTo()
Element.scrollIntoView()

这几个兼容性，在IE和Safari，低版本兼容性不好
用的时候加上?以免报错  window?.scrollTo()

Element.scrollIntoView()
有时候滚动的位置，不是你想要的，可以在加一个空的id元素，position定位到你的预期位置

标签写法

锚点
<a href="#郭大爷"></a>
<div id="郭大爷"></div>
平滑滚动 加
html, body { scroll-behavior:smooth; }

手动polyfill低版本浏览器

if (typeof window.getComputedStyle(document.body).scrollBehavior == 'undefined') {
   // 传统的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;
        // 目标滚动位置
        //这个动画先快，后慢，想速度一样，稍微改一下就OK了
        scrollTop = scrollTop + distance / 5;
        if (Math.abs(distance) < 1) {
            window.scrollTo(0, position);
        } else {
            window.scrollTo(0, scrollTop);
            requestAnimationFrame(step);
        }
    };
    step();
};