scrollTop clientHeight

最新推荐文章于 2022-11-30 16:17:47 发布
最新推荐文章于 2022-11-30 16:17:47 发布
阅读量184 收藏
点赞数
分类专栏： 前端 文章标签： js

https://www.cnblogs.com/zhwc-5w4/p/7183217.html

clientHeight: 可理解为内部可视区高度，样式的height+上下padding(本例即220）。

scrollHeight: 内容的实际高度+上下padding（如果没有限制div的height，即height是自适应的，一般是scrollHeight==clientHeight）

滚动时通常我们只能scrollTop，当scrollTop为 0 到 scrollHeight-clientHeight  是正常的滚动距离，否则就是滚动过头了（手机上的上下拉取）！

LifeFuture1994
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手写一个滚动加载，scrollHeight、scrollTop与clientHeight傻傻分不清
weixin_38434088的博客
03-22 695
文章目录前言一、scrollHeight? scrollTop? clientHeight？二、实现步骤1.HTML&CSS部分2.js部分总结 前言 这是某厂的一道前端笔试题，做题的时候对滚动相关的这几个参数搞混了导致没能实现滚动加载的效果，在这里记录一下。 提示：以下是本篇文章正文内容，下面案例可供参考 一、scrollHeight? scrollTop? clientHeight？ 一图胜千言，下面直接上图来区分三个属性 蓝色部分可以看见的窗口部分，clientHeight代表了这块的
根据例子来理解scrollHeight,clientHeight,scrollTop的区别
01-14
包含以下内容： function test(){ var infoHeight = document.getElementById(”info”).scrollHeight; //scrollHeight 为层实际的高度，有实际有多高就多高，与当前网页高度无关。
浏览器 滚动条 clientHeight、offsetHeight、scrollTop。
黄彪博客
09-07 507
文章参考 http://www.jb51.net/article/57614.htm http://www.jb51.net/article/58688.htm http://www.internetke.com/tutorial/js/2014/0523/560.html     需要了解三个dom元素，分别是：clientHeight、offsetHeight、scrollTop。
JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍
何以为皇的博客
10-25 3381
获取页面可视高度 document.getElementById("#id").clientHeight 获取当前dom元素的可滚动高度 document.getElementById("#id").scrollHeight 获取当前dom元素的滚动距离 document.getElementById("#id").scrollTop scrollHeight = scrollTop + clientHeight ...
看图理解scrollTop,scrollLeft,clientWidth,clientHeight,offsetWidth,offsetHeight
xyjikl
12-10 378
每次用JS获取页面的高宽时总都是相当的揪心，同一个属性在不同的浏览器或不同的W3C标准下所表示的意思都不尽相同。以下就针对页面的实际高宽和可见区域做个总结，以便大家查阅！ 1. 在W3C标准的情况下 W3C标准页面，即在HTML代码头部加入   在IE中： document.body.clientWidth ==> BODY对象宽度 document.bod
vue项目设置scrollTop不起作用(总结)
10-17
主要介绍了vue项目设置scrollTop不起作用(总结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理
01-18
尺寸相关：offsetHeight、clientHeight、scrollHeight； 偏移相关：offsetTop、clientTop、scrollTop、pageYOffset、scrollY； 获取相对视口位置：Element.getBoundingClientRect()； 获取元素的style对象：...
scrollLeft,scrollTop等等详解.pdf
02-23
网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body....
滚动条事件js代码
07-15
滚动条滚动到页面底部事件js，兼容浏览器
scrollTOP scrollLeft clientHeight clientWidth 的各浏览器版修正
meizz的专栏
03-21 9759
var bodySL, bodyST;if(window.pageXOffset){    bodySL=window.pageXOffset;}else if(document.documentElement&&document.documentElement.scrollLeft){    bodySL=document.documentElement.scrollLeft;}else if(
clientHeight / scrollHeight / offsetHeight 等属性的区别图
liuysheng的专栏
09-22 1380
取document.body.scrollTop 值时 一直为0, 是因为： 页面具有 DTD（或者说指定了 DOCTYPE）时，使用 document.documentElement。  页面不具有 DTD（或者说没有指定了 DOCTYPE）时，使用 document.
花点时间记住scrollTop、clientHeight、offsetTop、scrollHeight
qq_40574071的博客
07-20 1489
一、经典图解读 先放上一张经典图 看不懂，没关系！接下来耐心看完必然有不一样的收获。 我们常遇到的是实际是这么几个属性： offsetTop clientHeight scrollTop scrollHeight 如果不把它们弄清楚就会导致每次遇到时都混淆不清，下面就逐一看看这么些属性。 （1）offsetTop HTMLElement.offsetTop为只读属性，它返回当前元素相对于其offsetParent元素的顶部内边距的距离。--MDN 【巧记】offset本身就是..
记font-family的坑（clientHeight 和 scrollHeight 不相等）
weixin_45143856的博客
11-30 292
组件封装 font-family的坑 clientHeight 和scrollHeight 不相等
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
热门推荐
qq_35430000的博客
05-11 16万+
转载自：https://www.imooc.com/article/17571网页可见区域高：document.body.clientHeight网页正文全文高：document.body.scrollHeight网页可见区域高（包括边线的高）：document.body.offsetHeight网页被卷去的高：document.body.scrollTop屏幕分辨率高：window.screen...
前端中的scrollHeight 、scrollTop、clientHeight等意思
jjw_zyfx的博客
10-25 3829
要记住 通过 标签.style.width是获取不到宽度的，如果必须要获取可以通过clientWidth，或者是offsetWidth 完成这个动作需要先知道三个高度： scrollHeight 文档内容实际高度，包括超出视窗的溢出部分 scrollTop 滚动条距元素(不一定是屏幕最顶端)顶部滚动的距离 clientHeight窗口可视范围高度（就是自己能看到的高度，如果这...
Js——ScrollTop、ScrollHeight、ClientHeight、OffsetHeight汇总
CaseyWei
06-17 6763
一直对ScrollTop、ScrollHeight、ClientHeight、OffsetHeight这些内容傻傻分不清楚，今天整体下。 scrollHeight scrollHeight含有scroll当然这个高度与滚动相关。 读写：只读 描述：包括overflow样式属性导致的视图中不可见内容，没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值c...
让你彻底明白pageWidth、clientHeight、clientWidth、scrollTop、 scrollLeft、scrollHeight、scrollWidt的含义和用法
luojiandecsdn的博客
03-03 1948
由于各个版本的浏览器对取得clientWidth/scrollTop/scrollHeight等属性的方法各有不同，并且楼主也有点傻傻分不清，所以本篇文章不详细讲述原理，只是总结了一些兼容各浏览器的常见用法。 如果想了解原理，可以查看这篇文章：JS中关于clientWidth offsetWidth scrollWidth 等的含义以下是正文1、pageWidth、pageHeight/* *兼容
scrollTop、scrollHeight、offsetTop、offsetHeight、clientTop、clientHeight区别
weixin_43993776的博客
06-02 492
scrollHeight会随着子元素的高度变化而变化，即使自身固定高度出现滚动轴，包括padding和子元素撑大的部分scrollTop指的是元素的滚动距离， 可读可写的一个属性
scrollTop offset client
最新发布
09-07
scrollTop、offset和client是三个常用的属性，用于获取或设置元素的滚动位置和尺寸信息。 1. scrollTop属性用于获取或设置元素的垂直滚动位置。例如，可以使用element.scrollTop来获取一个元素的当前滚动位置，或者使用element.scrollTop = value来将滚动位置设置为特定的值。 2. offset属性用于获取一个元素相对于文档的位置信息。offset包括四个值：offsetTop、offsetLeft、offsetWidth和offsetHeight。例如，可以使用element.offsetTop来获取一个元素相对于文档顶部的垂直偏移量。 3. client属性用于获取一个元素的尺寸信息，不包括滚动条占据的空间。client包括四个值：clientTop、clientLeft、clientWidth和clientHeight。例如，可以使用element.clientWidth来获取一个元素的可见宽度。 这些属性在处理页面滚动、定位元素等情景中经常用到，希望对你有帮助！如果有更多问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值