scrollheight？js中的scrollHeight是什么意思

编程之家2023-11-0675次浏览

本篇文章给大家谈谈scrollheight，以及js中的scrollHeight是什么意思对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。

jquery有 scrollHeight来获取实际的高度的方法：

$(window).height();//浏览器当前窗口可视区域高度

$(document).height();//浏览器当前窗口文档的高度

$(document.body).height();//浏览器当前窗口文档body的高度

$(document.body).outerHeight(true);//浏览器当前窗口文档body的总高度包括border padding margin

$(window).width();//浏览器当前窗口可视区域宽度

$(document).width();//浏览器当前窗口文档对象宽度

$(document.body).width();//浏览器当前窗口文档body的高度

$(document.body).outerWidth(true);//浏览器当前窗口文档body的总宽度包括border padding margin

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。

移动端加载数据时，由于数据太多，不会一次性全部加载出来。有些会采用pc端那样用分页码的形式，但是更多的确实滑动滚动条到内容最后，加载更多内容出来。一般引入了三方的前端框架和插件，基本都会有此功能。偶尔会需要采用原生js实现，故而此处就介绍下原生js的实现方式。另外附上jquery的实现方式。

需要三个高度：

scrollHeight（文档内容实际高度，包括超出视窗的溢出部分）、

scrollTop（滚动条滚动距离）、

clientHeight（窗口可视范围高度）。

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

下面附上三者之间的关系：

JQuery获取三个高度和原生获取三个高度的方式：

scrollHeight返回元素的完整的高度，以像素为单位.

当一个元素拥有滚动条时（比如由于 CSS的 overflow属性），这些属性和 offsetHeight不同，offsetHeight只是报告元素的可见部分的大小。这是非标准的但却得到很好支持的属性。

这个属性是非标准的，所以在不同浏览器中可能会存在差异，例如：

在Firefox浏览器中：

scrollHeight就是滚动条可滚动的部分还要加上border的高度还要加上横向滚动条不可用的高度,与clientHeight比起来,多个border的高度跟横向滚动条不可用的高度.

在IE浏览器中：

指这个对象它所包含的对象的高度加上border的高度和margin

文章到此结束，希望我们对于scrollheight的问题能够给您带来一些启发和解决方案。如果您需要更多信息或者有其他问题，请随时联系我们。