手写一个滚动加载，scrollHeight、scrollTop与clientHeight傻傻分不清

最新推荐文章于 2023-04-27 09:16:37 发布

前端小学生er

最新推荐文章于 2023-04-27 09:16:37 发布

阅读量713

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_38434088/article/details/115094778

版权

文章目录

前言
一、scrollHeight? scrollTop? clientHeight？
二、实现步骤
- 1.HTML&CSS部分
- 2.js部分
总结

前言

这是某厂的一道前端笔试题，做题的时候对滚动相关的这几个参数搞混了导致没能实现滚动加载的效果，在这里记录一下。

提示：以下是本篇文章正文内容，下面案例可供参考

一、scrollHeight? scrollTop? clientHeight？

一图胜千言，下面直接上图来区分三个属性

蓝色部分可以看见的窗口部分，clientHeight代表了这块的高度，scrollHeight指的是用户可以看到的所有的东西的高度，但是由于窗口大小的限制，所以就只可以通过滚动查看，不能同时展示。scrollTop指的就是整体往上滑动的距离，也可以理解为上部被遮挡的距离。
那么关键的地方来了，我们要做一个滚动加载的功能，那么什么时候触发这个加载的功能呢？
这里就用到了图中右下角的 x ，这个值是可以通过以上三个值计算出来的，然后给定一个阈值，当这个x小于或等于阈值的时候，就会触发添加元素的操作，这样就可以实现滚动加载功能了。

二、实现步骤

1.HTML&CSS部分

代码如下（示例）：

<body>
    <div class="container"></div>
</body>

<style type="text/css">
    .container{
    width: 300px;
    height: 200px;
    border: 1px solid #efeff4;
    background: #ffffff;
    overflow: auto;
}
.card{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    background: #25bb9b;
    margin: 10px;
    color: #ffffff;
    border-radius: 8px;
}
</style>

这里涉及一个父容器container，这里要将父容器设置为overflow:auto;这个属性就是当容器中内容的高度或者宽度没有超过容器本身宽高的时候没有滚动条，当超过的时候就会出现滚动条，所以设置这个属性的同时自然需要把容器本身的宽高设置一下。
然后.card就是我们要往里放入的元素所需要的样式。

2.js部分

代码如下（示例）：

window.onload = function(</

最低0.47元/天解锁文章

前端小学生er

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手写一个滚动加载，scrollHeight、scrollTop与clientHeight傻傻分不清

文章目录前言一、scrollHeight? scrollTop? clientHeight？二、实现步骤1.HTML&CSS部分2.js部分总结前言这是某厂的一道前端笔试题，做题的时候对滚动相关的这几个参数搞混了导致没能实现滚动加载的效果，在这里记录一下。提示：以下是本篇文章正文内容，下面案例可供参考一、scrollHeight? scrollTop? clientHeight？一图胜千言，下面直接上图来区分三个属性蓝色部分可以看见的窗口部分，clientHeight代表了这块的
复制链接

扫一扫