offset、client、scroll、screen、page五大系列的区别（三）

最新推荐文章于 2024-09-19 18:03:15 发布

原创最新推荐文章于 2024-09-19 18:03:15 发布 · 855 阅读

6 ·

CC 4.0 BY-SA版权

本文为博主原创文章，欢迎转载。如有问题，欢迎指正。

CSS 专栏收录该内容

9 篇文章

订阅专栏

本文深入探讨CSS布局中的scroll系列属性，包括scrollWidth/scrollHeight（表示元素内容的实际尺寸）和scrollLeft/scrollTop（指示元素滚动位置）。通过实例解释当元素内容超过自身尺寸时，scroll属性如何工作，并介绍了在浏览器滚动事件中如何利用这些属性，特别是针对不同浏览器版本的兼容处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接上两篇文章，前面已经讲了offset系列和client系列，这篇文章主要讲scroll系列

scroll系列

①scrollWidth / scrollHeight

元素内容实际宽度 / 高度（不包括border）

分两种情况：

这个元素内容的宽度 or 高度 没有超过这个元素的宽 or 高，那么scrollWidth / scrollHeight指的就是这个元素的width + padding
这个元素内容的宽度 or 高度 超过了这个元素的宽 or 高，那么scrollWidth / scrollHeight指的就是这个元素内容的实际宽or高


div {
    width: 300px;
    height: 200px;
    border: 2px solid red;
    overflow: auto;
}

input {
    position: absolute;
    left: 400px;
    top: 100px;
}

<div id="dv"></div>
<input type="button" value="显示效果" id="btn" />

目前div内容是空的，那么有scrollWidth = clientWidth / scrollHeight = clientHeight

document.getElementById("btn").onclick = function () {
     var dv = document.getElementById("dv");
    
     console.log(dv.offsetHeight);//204 元素的高度(border+padding)
     console.log(dv.scrollHeight);//200 内容的实际高度
     console.log(dv.clientHeight);//200 元素可视区域的高，不包括边框和滑动条

现在我在div里面加几个p标签

<div id="dv">
        <p>哈哈</p>
        <p>哈哈</p>
        <p>哈哈</p>
        <p>哈哈</p>
        <p>哈哈</p>
        <p>哈哈</p>
        <p>哈哈</p>
        <p>哈哈</p>
    </div>

再次输出

console.log(dv.offsetHeight);//204 元素的高度(border+padding)
console.log(dv.scrollHeight);//391 内容的实际高度
console.log(dv.clientHeight);//200 元素可视区域的高，不包括边框和滑动条

②scrollLeft / scrollTop

向左或向上卷曲出去的距离

给div添加卷动事件

//元素的滚动事件
document.getElementById("dv").onscroll = function () {
    console.log(this.scrollTop);
};

上面主要是给一个元素添加滚动事件，那如果是浏览器的滚动事件的话，就得使用pageYOffset来获取向上卷曲出去的距离，如果是IE8等低版本浏览器可以使用document.documentElement.scrollTop或document.dody.scrollTop来获取了，当然有时候不只是获取向上卷曲出去的距离，有时候也获取向左卷曲出去的距离，这样可以封装一个getScrol函数

function getScroll() {
            return {
                top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
                left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
            };
        }

比如我想获取浏览器向上卷曲出去的距离

window.onscroll = function () {
            console.log(getScroll().top);
        };

利用这个属性可以实现滚动条下滑一定距离的时候，导航栏能固定在上方