scroll家族

最新推荐文章于 2023-01-08 15:02:07 发布

Test_晓

最新推荐文章于 2023-01-08 15:02:07 发布

阅读量376

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_45473786/article/details/105026237

版权

JavaScript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

文章目录

scroll家族属性

document.body.scrollWidth：网页正文全文宽
document.body.scrollHeight：网页正文全文高
document.body.scrollTop：网页正文被移去的高（滚动高度）
document.body.scrollLeft：网页正文被移去的左（滚动宽度）
但在实际开发中使用较多的是scrollTop

scroll兼容性问题

首先要提到一个概念是严格模式和怪异模式
如果你不清楚可参考：
严格模式和怪异模式

CSS样式

<style>
    body {
        height: 2000px;
    }
</style>

怪异模式下的兼容

<script>
    window.onscroll = function() {
        
        //怪异模式  低版本IE中使用
       console.log(document.body.scrollTop);
    }
</script>

严格模式下的兼容

使用document.documentElement.scrollTop ，这里以谷歌为例

<script>
    window.onscroll = function() {
        
        //严格模式做兼容
        console.log(document.documentElement.scrollTop);    //兼容
    }
</script>

所有版本兼容

<script>
    window.onscroll = function() { 
        //所有版本都兼容
        console.log(document.documentElement.scrollTop || document.body.scrollTop);
   
    }
</script>

高版本浏览器兼容

使用window.pageYOffset，是目前最常见的写法之一

<script>
    window.onscroll = function() {

        console.log(window.pageYOffset);     //高版本浏览器
    }
</script>

兼容综合写法

<script>
    window.onscroll = function() {
        var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
		console.log(scroll);
    }
</script>