scroll滚动事件在浏览器中无效

最新推荐文章于 2024-08-02 17:24:12 发布

wjq-xxq

最新推荐文章于 2024-08-02 17:24:12 发布

阅读量1.4w

点赞数 4

分类专栏： javascript 文章标签： html js scroll

本文链接：https://blog.csdn.net/wjq_xxq/article/details/71155408

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

因为兼容性问题

scrollTop: 被卷去的头部
它就是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离

怎么得到scrollTop

window.onscroll = function() { 页面滚动语句  }

1.谷歌浏览器和没有声明 DTD ：

document.body.scrollTop;

2.火狐和其他浏览器 (就是document.html.scrolltop的意思,只是没有document.html这样的写法而已)

  document.documentElement.scrollTop;

ie9+ 和最新浏览器 (都认识scroll)

  window.pageXOffset;     pageYOffset  （scrollTop）

兼容性写法：

window.onscroll = function(){
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || 
        document.body.scrollTop || 0;
    document.title = scrollTop;
    }

封装scrollTop：

<script>
//   var json = {left: 10, right: 10}  变异
//json.left   json.top
function scroll() {
    if(window.pageYOffset != null)  //  ie9+ 和其他浏览器
    {
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    }
    else if(document.compatMode == "CSS1Compat")  // 声明的了 DTD
      // 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>
    {
        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop
        }
    }
    return { //  剩下的肯定是怪异模式的
        left: document.body.scrollLeft,
        top: document.body.scrollTop
    }
}
window.onscroll = function() {
    console.log(scroll().top);
}
</script>