srcollTop、clientHeight、scrollHeight详解

原生js：

scrollTop  ——   滚动条滚动的距离（注意：不是滚动条距顶端的距离）
scrollHeight —— 文档内容的实际高度，包含超出视图溢出的部分
clientHeight ——  窗口可视范围的高度

当 clientHeight + scrollTop >= scrollHeight 时，表示已经抵达内容的底部了，可以加载更多内容。

scrollTop：

可以通过 window.pageYOffset 或 document.documentElement.scrollTop 来获取

scrollHeight：

可以通过 document.documentELement.scrollHeight 或 document.bodyscrollHeight

clientHeight:

可以通过 window.innerHeight 或 document.documentElement.clientHeight 来获取

下边这张图很清晰的说明了三者的表现：

补充

与之对应的jQuery中三者的表达方式：

<script>$(window).on("resize scroll",function() {var windowHeight = $(window).height();//当前窗口的高度             var scrollTop = $(window).scrollTop();//当前滚动条从上往下滚动的距离            var docHeight = $(document).height(); //当前文档的高度 console.log(scrollTop, windowHeight, docHeight);// 触底公式：（滚动条滚动的高度 + 可视窗口的高度 = 文档的高度）  这个是基本的公式  if (scrollTop + windowHeight >= docHeight) { console.log("===加载更多数据===");}});
</script>

$(document).height();  ==  document.documentElement.scrollHeight;    // 文档内容的实际高度
$(window).scrollTop(); == document.documentElement.scrollTop;        // 滚动条滚动高度
$(window).height(); == document.documentElement.clientHeight;        // 可视窗口高度

srcollTop、clientHeight、scrollHeight详解相关推荐

css clientheight、offsetheight、scrollheight详解
介绍网上介绍clientheight.offsetheight.scrollheight的帖子很多,看后感觉明白了,一细想似乎又不明白了.为了获取更权威的解答,查阅了MDN 文档,希望能帮助后来人. ...
Html元素的scrollWidth和scrollHeight详解 .
上网搜了一下scrollWidth和scrollHeight,大部分都是转帖,也没有具体说清楚,这两个属性值是什么,也没有图. 索性自己测试一下,包含的浏览器有IE 6,IE 7,IE 8,IE 9, ...
html5中的行高元素,详解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理
关于元素的一些属性在前端的日常开发中,我们经常无可避免的需要获取或者监听一些页面的属性,那么我们需要经常了解一些属性代表的含义才能更好地使用这些属性.特别是一下这些: 尺寸相关:offsetHeig ...
【JS中scrollHeight/Width详解（不加定位的情况下）】
scrollHeight和scrollWidth的详解一. 内容块Y轴上没有超出的情况下二.内容块Y轴上有超出的情况下 2.1 当 overflow-y: visible的情况 2.2 设置ove ...
网页性能管理详解：浅谈chrome-Timeline及window.requestAnimationFrame()方法
你遇到过性能很差的网页吗? 这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅. 你会有什么反应?我猜想,大多数用户会关闭这个页面,改为访问其他网站.作为一个开发 ...
Python爬虫之selenium库使用详解
Python爬虫之selenium库使用详解本章内容如下: 什么是Selenium selenium基本使用声明浏览器对象访问页面查找元素多个元素查找元素交互操作交互动作执行JavaS ...
python 录制web视频_Python django框架 web端视频加密的实例详解
视频加密流程图: 后端获取保利威的视频播放授权token,提供接口api给前端参考文档:http://dev.polyv.net/2019/videoproduct/v-api/v-api-play ...
ios 获取html的高度,iOS Webview自适应实际内容高度的4种方法详解
//第一种方法 - (void)webViewDidFinishLoad:(UIWebView *)webView { CGFloat webViewHeight=[webView.scrollVie ...
selenium用法详解
selenium用法详解 selenium主要是用来做自动化测试,支持多种浏览器,爬虫中主要用来解决JavaScript渲染问题. 模拟浏览器进行网页加载,当requests,urllib无法正常获取 ...