scrollheight跟clientheight（js中的scrollHeight是什么意思）
本文目录
- js中的scrollHeight是什么意思
- js中的clientHeight和offsetHeight有什么区别么
- js window.scroll 怎么判断滚动到底部
- scrollHeight,clientHeight,scrollTop明晰
- clientHeight、offsetHeight和scrollleft有什么区别
js中的scrollHeight是什么意思
scrollHeight返回元素的完整的高度，以像素为单位.
当一个元素拥有滚动条时（比如由于 CSS 的 overflow 属性），这些属性和 offsetHeight 不同，offsetHeight只是报告元素的可见部分的大小。这是非标准的但却得到很好支持的属性。
这个属性是非标准的，所以在不同浏览器中可能会存在差异，例如：
在Firefox浏览器中：
scrollHeight就是滚动条可滚动的部分还要加上border的高度还要加上横向滚动条不可用的高度,与clientHeight比起来,多个border的高度跟横向滚动条不可用的高度.
在IE浏览器中：
指这个对象它所包含的对象的高度加上border的高度和margin
js中的clientHeight和offsetHeight有什么区别么
js中的clientHeight和offsetHeight的区别如下：
1、clientHeight
网页(内容)可见区域高：document.body.clientHeight 即页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。
注意：IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
2、offsetHeight
网页可见区域高：document.body.offsetHeight (包括边线的宽)
二者联系：
NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
js window.scroll 怎么判断滚动到底部
若要想判断js window.scroll是否滚动到底部，需要用的三个属性值，它们分别是：
scrollTop、clientHeight和scrollHeight；
1、scrollTop为滚动条在Y轴上的滚动距离。
2、clientHeight为内容可视区域的高度。
3、scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。
so，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。
scrollHeight,clientHeight,scrollTop明晰
移动端加载数据时，由于数据太多，不会一次性全部加载出来。有些会采用pc端那样用分页码的形式，但是更多的确实滑动滚动条到内容最后，加载更多内容出来。一般引入了三方的前端框架和插件，基本都会有此功能。偶尔会需要采用原生js实现，故而此处就介绍下原生js的实现方式。另外附上jquery的实现方式。
需要三个高度：
scrollHeight（文档内容实际高度， 包括超出视窗的溢出部分 ）、
scrollTop（滚动条滚动距离）、
clientHeight（窗口可视范围高度）。
当 clientHeight + scrollTop 》= scrollHeight 时，表示已经抵达内容的底部了，可以加载更多内容。
下面附上三者之间的关系：
JQuery 获取三个高度 和 原生获取三个高度的方式：
clientHeight、offsetHeight和scrollleft有什么区别
我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释，这里说的是 document.body，如果是 HTML 控件，则又有不同，点击这里查看。
这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。
clientHeight
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。
offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。
scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。
简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。
说明
以上基于 DTD HTML 4.01 Transitional，如果是 DTD XHTML 1.0 Transitional 则意义又会不同，在 XHTML 中这三个值都是同一个值，都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器。下载或浏览测试文件。
更多文章：
form表单制作（为什么制作的form表单会在网页显示中多出一行）
2026年10月11日 09:10
teammate（teammate,company,partner）
2026年10月11日 06:10
javascript arraybuffer（javascript可以把base64编码转换成二进制代码吗求示例代码！）
2026年10月11日 04:00
text函数公式（excel中round和text函数的区别是什么）
2026年10月11日 03:50
2026年10月11日 02:40
google chrome打不开（chrome浏览器打不开怎么回事 浏览器打不开的处理方法）
2026年10月11日 02:00
websocket整合springboot（Springboot整合Websocket遇到的坑）
2026年10月11日 01:40
2026年10月11日 00:40
drawerlayout（android 怎样让drawerlayout设置的侧滑菜单的内容充满屏幕）
2026年10月10日 19:20
xor四位数怎么运算（单片机怎样用C语言实现4个数字间的异或）
2026年10月10日 17:50
