前端三大家族之scroll，可参照实现滚动加载
站长
· 阅读数 17
本文将介绍 scroll 的三个属性，然后实现滚动监听，参照滚动加载的场景在滚动条距离底部的距离小于 200 的时候进行操作，然后移除滚动监听。首先是用于获取到元素实际高度和实际宽度的两个属性：
- scrollHeight : 这个属性可以获取到元素内容的实际高度，计算方式是 padding + content ，如果元素内容没有超出元素本身设置的 height 获取到的数值应该是和 clientHeight 是一样的【client家族属性】。但是当元素的实际高度已经超出了元素的 height 的范围，而且给元素设置了 overflow:auto; 属性的时候，我们仍然可以使用 scrollHeight 获取到元素的实际高度(包含超出未展示的部分)。
- scrollWidth : 这个属性的用法参照上面的 scrollHeight 。
然后是用于获取元素在滚动时被卷去距离的属性:
- scrollTop : 这个属性就是在元素的实际高度超出了元素的 height ，而且设置了 overflow:auto; 的时候，用于在滚动时获取到元素上方被滚动条卷去的距离。
三个属性代表的意义如下图：
熟悉了上面的三个属性之后，就可以在滚动时做一些操作了，代码示例如下:
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box{
height: 200px;
width: 200px;
padding: 10px;
border: 5px solid red;
overflow-y: auto;
}
ul>li{
line-height: 30px;
}
</style>
<body>
<div class="box">
<ul>
<li>sdasd</li><li>sdasd</li><li>sdasd</li><li>sdasd</li><li>sdasd</li><li>sdasd</li><li>sdasd</li><li>sdasd</li><li>sdasd</li><li>sdasd</li>
<li>sdasd</li><li>sdasd</li><li>sdasd</li><li>sdasd</li><li>sdasd</li><li>sdasd</li><li>sdasd</li><li>sdasd</li><li>sdasd</li><li>sdasd</li>
<li>sdasd</li><li>sdasd</li><li>sdasd</li><li>sdasd</li><li>sdasd</li><li>sdasd</li><li>sdasd</li><li>sdasd</li><li>sdasd</li><li>sdasd</li>
</ul>
</div>
<script>
let box = document.querySelector('.box')
console.log('top', box.scrollHeight); // content+padding ----> 220 ，加了内容，设置了 overflow: auto; 之后 ----> 952
console.log('top', box.scrollWidth); // content+padding ----> 220
/**
* scrollHeight 用于获取到元素的高度，不包含边框，返回的值 content+padding 不带单位 ---> 220 ,
* 如果里面的内容超出了盒子的高度，将会获取到元素的真实高度，比如:
* 给盒子设置 height: 100px; 但是内容溢出了而且没有被隐藏，line-height: 30px; 的数据共有 10 行，那获取到的值就应该是 300
* scrollWidth 获取宽度也是同样的道理
*/
function logScroll(){
console.log('滚动的距离【顶部被卷去的部分】', box.scrollTop);
//到底部之后取消监听 , 距离底部的距离 = 元素的真实高度 - 卷去的距离 - 元素可视窗口的高度
let truthHeight = box.scrollHeight //获取到元素的真实高度
let hiddenTop = box.scrollTop //元素顶部被隐藏的距离[被页面卷去的高度]
let clientHeight = box.clientHeight //获取到元素可视窗口的高度[关于 client 家族属性请参考上一篇文章]
let bottomDistance = truthHeight - hiddenTop - clientHeight
console.log('距离底部的距离', bottomDistance);
//当距离底部的距离小于 200 的时候取消对滚动事件的监听
if(bottomDistance < 200){
box.removeEventListener('scroll', logScroll)
}
}
//监听元素的滚动事件
box.addEventListener('scroll', logScroll)
</script>
</body>
</html>欢迎交流！