元素滚动scroll系列

最新推荐文章于 2024-02-07 17:04:47 发布

01xm

最新推荐文章于 2024-02-07 17:04:47 发布

阅读量190

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/Bon_nenul/article/details/118027189

版权

JavaScript 专栏收录该内容

44 篇文章 3 订阅

订阅专栏

元素滚动scroll系列

scroll翻译过来就是滚动的，我们使用scroll系列相关的属性可以动态得到该元素的大小、滚动距离

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离，返回的数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回的数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，返回的数值不带单位
element.scrollHeight	返回自身实际的高度，不含边框，返回的数值不带单位

在这里插入图片描述
cilentHeight是不包括超出边框的内容

【scroll事件】

<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: pink;
        border: 10px solid red;
        padding: 10px;
        overflow: auto;
    }
</style>
<body>
    <div class="box">
    	我是内容我是内容我是内容
        我是内容我是内容我是内容
        我是内容我是内容我是内容
        我是内容我是内容我是内容
        我是内容我是内容我是内容
        我是内容我是内容我是内容
        我是内容我是内容我是内容
        我是内容我是内容我是内容
        我是内容我是内容我是内容
        我是内容我是内容我是内容
        我是内容我是内容我是内容
    </div>
    <script>
        var box = document.querySelector('.box')
        console.log(box.scrollHeight) // 311px
        console.log(box.clientHeight) // 210px 
        //scroll滚动事件，当我们滚动条发生变化时会触发的事件
        box.addEventListener('scroll',function(){
            console.log(box.scrollTop)
        })
    </script>
</body>