JS封装自己的scrollTop left

最新推荐文章于 2023-07-12 13:16:30 发布

落花雨时

最新推荐文章于 2023-07-12 13:16:30 发布

阅读量195

点赞数

分类专栏：大前端

本文链接：https://blog.csdn.net/mengxianglong123/article/details/84644480

版权

大前端专栏收录该内容

88 篇文章 2 订阅

订阅专栏

首先，什么是scroll，scroll就是用来获得滚动长度的：

scroll也是同理，但是它的写法有如下规则：

谷歌浏览器和没有声明 DTD <DOCTYPE > ：
document.body.scrollTop;
火狐和其他浏览器
document.documentElement.scrollTop;
ie9+ 和最新浏览器都认识
window.pageXOffset; pageYOffset （scrollTop）

我们调用一次，只能获得当前的滚动长度，不能实时监控，所以就要加一个window事件：

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

兼容写法：

 var scrollTop = window.pageYOffset || document.documentElement.scrollTop
          || document.body.scrollTop || 0;

封装写法：

<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>

这样，scroll().top,scroll().left就各自是相应的长度。

落花雨时

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS封装自己的scrollTop left

首先，什么是scroll，scroll就是用来获得滚动长度的：scroll也是同理，但是它的写法有如下规则：谷歌浏览器和没有声明 DTD &lt;DOCTYPE &gt; ：document.body.scrollTop;火狐和其他浏览器document.documentElement.scrollTop;ie9+ 和最新浏览器都认识window.pageXOffse...
复制链接

扫一扫

专栏目录