总述 在JS 中scrollWidth、scrollHeight、scrollLeft 、scrollTop 属性在做一些复杂的交互效果中是非常常用的，因此在本博文中详细的介绍并给出实例。...2. scrollWidth和scrollHeight 2.1 概念 element.scrollWidth：返回元素的整体宽度，包括由于溢出而无法展示在网页的不可见部分。...element.scrollHeight ：返回元素的整体高度，包括由于溢出而无法展示在网页的不可见部分。...在页面中，溢出说得更加通俗一些就是有没有滚动条出现，出现了，说明子元素有一部分被父元素遮挡了，就溢出了，下面给出两个实例，一个没有溢出（没有滚动条），一个溢出了，分别观察他们的scrollWidth和scrollHeight... console.log(children_div.scrollWidth, children_div.scrollHeight) </script
接着我们来看scrollHeight function justAtest() { var test= document.getElementById(“test...); alert(test3.scrollHeight); alert(test2.scrollHeight) alert(test.scrollHeight...IE的结果为: 15, 15 , 700,602, 552 scrollHeight:这个属性就比较麻烦了,因为它们在火狐跟IE下简直差太多了.....); alert(test3.scrollHeight); alert(test2.scrollHeight) alert(test.scrollHeight...IE的结果为: 15, 15 , 700,602, 552 scrollHeight:这个属性就比较麻烦了,因为它们在火狐跟IE下简直差太多了..
其中 scrollHeight 属性，互联网上几乎搜素不到关于它的应用技巧，而我正好需要用到它。...我们现在只探讨和垂直滚动有关的 scrollTop、scrollHeight 属性。...scrollHeight 等于外部div的高度500px。其实，都不对。 其实，图中标出的a、b，对我们编程写js代码没有任何具体意义，它仅仅具有象征意义。...实际上，在js代码里，滚动条是被抽象为一个“点”来对待的。scrollHeight其实不是“滚动条的高度”（b），而是表示滚动条需要滚动的高度，即内部div的高度750px。... <script language=
$(“your selector”).prop(“scrollHeight”); 其他操作： $(window).height(); //浏览器当前窗口可视区域高度 $(document).height...document.body).outerWidth(true);//浏览器当前窗口文档body的总宽度 包括border padding margin 滚动下拉加载思路：判断当前滚动条的位置是否到达距离 scrollHeight...滚动高度的某个位置，注意滚动条位置到底后，加上可视区域高度，才等于 scrollHeight 高度。
区分clientHeight、scrollHeight、offsetHeight clientHeight、offsetHeight、scrollHeight都是用来描述DOM元素的高度的属性；对于同一个元素...scrollHeight： 只读属性，如果元素内的子元素高度大于该元素，scrollHeight所表示的元素高度为：元素内子元素的高度+该元素的上下padding；如果元素内的子元素高度小于该元素，scrollHeight...与clientHeight在数值上相等； 3、如果元素内的子元素高度大于该元素，scrollHeight所表示的元素高度为：元素内子元素的高度+该元素的上下padding； 参考文献： [1] css...clientheight、offsetheight、scrollheight详解 [2] 搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop...[3] js中offsetHeight、clientHeight、scrollHeight等相关属性区分总结 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/163742
jQuery 里和滚动条有关的概念很多，但是有三个属性和滚动条的拖动有关，就是：scrollTop、scrollLeft、scrollHeight。...其中 scrollHeight 属性，互联网上几乎搜素不到关于它的应用技巧，而我正好需要用到它。 我们现在只探讨和垂直滚动有关的 scrollTop、scrollHeight 属性。...scrollHeight 等于外部div的高度500px。其实，都不对。 其实，图中标出的a、b，对我们编程写js代码没有任何具体意义，它仅仅具有象征意义。...实际上，在js代码里，滚动条是被抽象为一个“点”来对待的。scrollHeight其实不是“滚动条的高度”（b），而是表示滚动条需要滚动的高度，即内部div的高度750px。... <script language=
> < meta http-equiv =”Content-Type” content =”text/html; charset=gbk” /> < title >scrollHeight...12px;height:3em;width:5em;} < body > < div onclick =”alert(this.scrollHeight...);” style =”border:0px solid red;” > 这里是一大段的文本，我们为了看看scrollHeight怎么用 ...，这样ie和safari的是12px*8=96px; 我们可以加上滚动条的宽度 width设为5em+17px=60px+17px=77px;这样宽度设为77px后，文字还是显示没设置时的6行数，于是scrollHeight...但是要注意的是firefox3.0.6里面如果height指定的值小于16*2=32px时，滚动条不显示，就是那2个箭头，这样实际文字列数可能要比其他浏览器多，于是得到的scrollHeight会小于其他的
还是上面那张图，div的offsetTop为20，因为margin-top是20，距离html顶部的距离是20… scrollHeight，只读 实话，这么久了，竟然一直搞错这个scroll相关属性，其实它描述的是...(图1) (图2) scrollHeight就是图2的高度，没有高度限制时，能够完全显示子元素时的高度(clientHeight)。...所以这里scrollHeight为220，计算：200+10+10=220 scrollTop，可写 是这些元素中唯一一个可写可读的。...判定元素是否滚动到底： element.scrollHeight – element.scrollTop === element.clientHeight 返回顶部 element.scrollTop...() => { for (let i = 0; i < 233; i++) inner.innerText += `第${i}行\n`; } 到此这篇关于JavaScript之scrollTop、scrollHeight
每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性，单凭单词很难搞清楚分别代表什么意思之间有什么区别...，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。...而可见部分的高度其实就是clientHeight，也就是scrollHeight>=clientHeight恒成立。...在有滚动条时讨论scrollHeight才有意义，在没有滚动条时scrollHeight==clientHeight恒成立。单位px，只读元素。 ?...最后附上这些属性的详细解释的文档： clientHeight offsetHeight offsetTop scrollHeight scrollTop
介绍 网上介绍clientheight、offsetheight、scrollheight的帖子很多，看后感觉明白了，一细想似乎又不明白了。为了获取更权威的解答，查阅了MDN 文档，希望能帮助后来人。...scrollheight scrollheight，可滚动高度，就是将滚动框拉直，不再滚动的高度，这个很好理解。scrollHeight通常用在iframe自适应内容高度的情况。...The scrollHeight value is equal to the minimum height the element would require in order to fit all the...scrollHeight这里就不验证了。 这张是没有横向滚动轴的渲染图 结论 通过上述实验，我们能得出，实际的可视区域比设置的值要小，因为滚动轴占去一部分。...注意 在做测试时，一定要将css样式放在javascript之前或者window加载完毕后执行js，否则解析结果跟预期不同。
scrollHeight scrollHeight的争议比较大，有些浏览器认为scrollHeight可以小于clientHeight，有些认为scrollHeight至少应该等于clientHeight...scrollHeight >=clientHeight 从结果分析，IE8认为scrollHeight的最小高度是clientHeight。...scrollHeight = padding + 内容margin box的高度 从结果分析，IE7认为scrollHeight 可以小于clientHeight。...scrollHeight = padding + 内容margin box的高度 从结果分析，IE6认为scrollHeight 可以小于clientHeight。...需要使用body.scrollHeight。
自接触js以来一直使用的是jquery插件，对js的了解甚少，经常容易混淆element.scrollHeight、element.scrollTop等方法。今天对这些方法做出比较。...DOCTYPE html> 测试scrollHeight等的区别 <meta http-equiv="content-type"...scrollHeight：获取元素的滚动高度。当元素内容高度超出元素高度时，scrollHeight=内容高度+自身高度。 offsetHeight：获取元素的实际高度。...补充： 1：获取元素的不包括padding和border的宽高度，使用js获取css样式的方法获取。...2：获取元素下面可滚动的高度值： element.scrollHeight – element.clientHeight – element.scrollTop; 希望看到这篇文章的同学，多多指出里面的理解不当的地方
浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight 发布时间：2020-07-17 09:27:20 来源：亿速云 阅读：223 作者：...小猪 小编这次要给大家分享的是浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获...(图1) (图2) scrollHeight就是图2的高度，没有高度限制时，能够完全显示子元素时的高度(clientHeight)。...所以这里scrollHeight为220，计算：200+10+10=220 scrollTop，可写 是这些元素中唯一一个可写可读的。...判定元素是否滚动到底： element.scrollHeight – element.scrollTop === element.clientHeight 返回顶部 element.scrollTop
元素发生溢出时可以设置scrollTop，设置的值为元素里内容向上滚动的不可见区域的高度 scollHeight 判定元素是否滚动到底 如果元素滚动到底，下面等式返回true，没有则返回false. element.scrollHeight...onClick="read()">按钮2 console.log(document.getElementById('scrollBody').scrollHeight...scrollTop) // 200 } function read(){ console.log(document.getElementById('box').scrollHeight
script type="text/javascript"> var $outerctn=$('#outerctn'); var innerctn=$('#innerctn'); var scrollHeight...=$outerctn.scrollHeight; var $outerctn_h=$outerctn.height(); var innerctn_h=innerctn.height();
网页可见区域高：document.body.clientHeight 网页正文全文高：document.body.scrollHeight 网页可见区域高（包括边线的高）：document.body.offsetHeight...网页被卷去的高：document.body.scrollTop 屏幕分辨率高：window.screen.height 每个HTML元素都具有clientHeight offsetHeight scrollHeight...，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。...而可见部分的高度其实就是clientHeight，也就是scrollHeight>=clientHeight恒成立。...在有滚动条时讨论scrollHeight才有意义，在没有滚动条时scrollHeight==clientHeight恒成立。单位px，只读元素。
屏幕可见区域高（内容的可视高度，不包括边框，边距或滚动条）：document.body.clientHeight 正文内容高（整个元素的高度，包括带滚动条的隐蔽的地方）：document.body.scrollHeight...margin哦，当然一般也木有啥需要把margin加进去的，以上代码为例，结果显示上图h2； 对了，为什么这个offsetheight的用法和height的用法不一样的，因为offsetHeight是js...所以只能用js方式来获取啦。...三、我么怎么用的clientHeight和scrollHeight clientHeight在页面上返回内容的可视高度（不包括边框，边距或滚动条），结果显示上图h3； scrollHeight返回整个元素的高度
scrollHeight IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。...scrollHeight scrollHeight是元素的padding加元素内容的高度。这个高度与滚动条无关，是内容的实际高度。...scrollHeight>= clientHeight 从结果分析，FF认为scrollHeight的最小高度是clientHeight。...scrollHeight >= clientHeight 从结果分析，FF认为scrollHeight的最小高度是clientHeight。...scrollHeight = padding + 内容marginbox的高度 从结果分析，IE7认为scrollHeight可以小于clientHeight。
另外，希望能再具体解释下document.documentElement.clientHeight、window.innerHeight、document.documentElement.scrollHeight...及document.body.clientHeight之间的关系，发现document.body.clientHeight和document.documentElement.scrollHeight的值不随浏览器窗口大小改变...w=document.documentElement.scrollWidth || document.body.scrollWidth; var h=document.documentElement.scrollHeight...|| document.body.scrollHeight; document.write(“网页的实际宽度:”+w+”px”+” “); document.write(“网页的实际高度:”+h+”px
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
