关于scrollHeight、scrollTop、clientHeight的总结

对于这三个css属性，首先有两点是需要注意的：

在实际应用中有两个场景会经常用到这三个属性，下面分两个大方向来分别介绍：

判断滚动是否到底

1.scrollHeight：

描述：包括overflow样式属性导致的视图中不可见内容的高度（单位像素），包括元素的padding，但不包括元素的margin.

2.clientHeight：

描述：返回元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。

3.scrollTop：

描述：当前容器上边框内部距离他内部的滚动元素上边框的距离。

所以从以上三个概念可以得出，判断内部元素滚动是否到底的表达式是：

scrollHeight - scrollTop === clientHeight

如果表达式为true，则表示已经滚动到底部。如果为false，表示没有滚动到底部。

将滚动内容重新置顶

由于scrollTop是可写的，而且表示容器上边框内部距滚动元素上边框内部的垂直距离，只要把scrollTop设成0，即可让内部滚动元素重新置顶。

参考：

https://blog.csdn.net/caseywei/article/details/92644503

https://www.cnblogs.com/wenruo/p/9754576.html

对于出入职场的你想知道行业内技术水平如何么？遇到的技术点有没有由于长期没有再接触容易忘记呢？『全栈编程』刷题小程序就是专门来解决上述两个问题的，其中题目全部出自一线大厂小哥的工作实践，每月刷题最多的同学可以任选100元以内图书一本哦~

你的鼓励让我更有动力

赞赏

0人进行了赞赏支持