关于offsetTop，scrollTop，scrollHeight，clientHeight

最新推荐文章于 2024-05-09 15:15:12 发布
最新推荐文章于 2024-05-09 15:15:12 发布
阅读量490 收藏 10
点赞数 10
文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaobaiya___/article/details/135612419
版权

offsetTop：元素到offsetParent顶部的距离

 scrollTop：可视区域顶部到文档流顶部的距离，也是滚动条滚动的距离

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

clientHeight：窗口可视范围高度

  • 当 clientHeight + scrollTop >= scrollHeight 时，表示已经抵达内容的底部了，可以加载更多内容。
xiaobaiya___
关注
  • 10
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe
09-25
top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight 等应用，大家可以参考下。
详解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理
01-18
关于元素的一些属性 在前端的日常开发中，我们经常无可避免的需要获取或者监听一些页面的属性，那么我们需要经常了解一些属性代表的含义才能更好地使用这些属性。特别是一下这些： 尺寸相关：offsetHeight、clientHeight、scrollHeight； 偏移相关：offsetTop、clientTop、scrollTop、pageYOffset、scrollY； 获取相对视口位置：Element.getBoundingClientRect()； 获取元素的style对象：Window.getComputedStyle(Element)； 属性的定义 关于尺
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
01-19
全文参考：https://github.com/iuap-design/blog/issues/38 、MDN clientHeight，只读 clientHeight可以用公式 CSS height + CSS padding – 水平滚动条的高度 (如果存在) 来计算。 如图，这样一个div，它的clientHeight为95，计算：50(height)+30(padding-top)+30(padding-bottom)-15(经测量滚动条高度就是15)=95 clientTop，只读 一个元素顶部边框的宽度（以像素表示）。嗯。。就只是border-top-width 类似的属性还有一
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
12-02
网页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth   (包括边线的宽);网页可见区域高： document.body.offsetHeight  (包括边线的宽);网页正文全文宽： document.body.scrollWidth;网页正文全文高： document.body.scrollHeight;网页被卷去的高： document.body.scrollTop;网页被卷去的左： document.body.scrollLeft
搞清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...
花点时间记住scrollTop、clientHeight、offsetTop、scrollHeight
qq_40574071的博客
07-20 1385
一、经典图解读 先放上一张经典图 看不懂，没关系！接下来耐心看完必然有不一样的收获。 我们常遇到的是实际是这么几个属性： offsetTop clientHeight scrollTop scrollHeight 如果不把它们弄清楚就会导致每次遇到时都混淆不清，下面就逐一看看这么些属性。 （1）offsetTop HTMLElement.offsetTop为只读属性，它返回当前元素相对于其offsetParent元素的顶部内边距的距离。--MDN 【巧记】offset本身就是..
详解clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
zag666的博客
10-27 869
clientHeight： 内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度。包括padding但不包括border、水平滚动条、margin的元素的高度。 scrollHeight: 滚动大小，指的是包含滚动内容的元素大小（元素内容的总高度）。 IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。 NS、FF 认为 scr...
JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍
何以为皇的博客
10-25 3287
获取页面可视高度 document.getElementById("#id").clientHeight 获取当前dom元素的可滚动高度 document.getElementById("#id").scrollHeight 获取当前dom元素的滚动距离 document.getElementById("#id").scrollTop scrollHeight = scrollTop + clientHeight ...
clientHeight offsetHeight scrollHeight offsetTop scrollTop
song854601134的博客
12-12 181
clientHeight和offsetHeight clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。 offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。 style.height //返回元素的高度（包括元素高度，不包括内边距、边框和外边距） clientHei
js中不同的height, top的区别对比
11-25
每次看到js中的 clientHeight(clientTop), offsetHeight(offsetTop)，scrollHeight(scrollTop)就头大，根本分不清这几种的区别，然而碰到这些已经不 值一两次了，然后每次都要查看一下各自的区别，才能决定使用哪个...
js中 scrollHeight、clientHeight、scrollTop的理解
weixin_42371812的博客
09-03 693
滚动触底加载数据，之前我也有写过博客，如果有需要，可以去看我之前写的博客 【https://blog.csdn.net/weixin_42371812/article/details/126450708】前段时间，自己手写了一个滚动触底加载数据的功能。今天有空，所以自己特意去研究了下它的原理。所谓的懒加载，就是在页面上先用一个静态的图片做一个占位符，等滚动那个图片位置的时候，再从后端请求数据，把真实的图片放到页面上。那么，这儿，我也就只说下我的大概思路，说的不好请大家在评论区里指出来。
clientHeight offsetHeight scrollHeight offsetTop scrollTop的区别
qq_45117943的博客
07-01 113
clientHeight 表示的是你肉眼见到的内容的高度。比如一个iframe标签你嵌套了一个百度的地址，这时候浏览器会给iframe一个默认高度，这个高度小于百度页面的高度就会出现滚动条，拖动上下滚动条你才能看完整个百度页面，也就是说你拖动滚动条才能看完整个百度也买呢的高度。这个默认高度减去上下边框和内边距就是clientHeight。 scrollHeight 表示整个完整内容的高度。还是上面那个例子，这个scrollHeight相当于你拖动滚动条以后看见一个完整百度页面的高度就是scrollHeigh
scrollTop、scrollHeight、offsetTop、offsetHeight、clientTop、clientHeight区别
weixin_43993776的博客
06-02 489
scrollHeight会随着子元素的高度变化而变化，即使自身固定高度出现滚动轴，包括padding和子元素撑大的部分scrollTop指的是元素的滚动距离， 可读可写的一个属性
scrollTop clientTop offsetTop scrollHeight clientHeight clientWidth的区别及用法
renxing518的博客
07-19 321
这几个属性做滚动时会经常用到，现总如下： 首先定义一个div，样式如下： *{ margin:0px; padding:0px;} body{ margin:0px; padding:10px; border:solid 10px #69F;} .aa{ margin:20px auto 0px; width:100px; height:50px; overflow:auto; b
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
XING的博客
05-03 1308
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
使用 js 类封装项目中音频播放功能的工具方法utils
qq_40868156的博客
05-07 195
封装音频播放功能的工具方法，js，es6，前端，工程化
vue3引入element-plus完整步骤
zzx262625的博客
05-06 430
如果你的项目需要在低版本浏览器上运行，你可能需要使用一些转换工具（如Babel、ESBuild）和polyfill来确保兼容性。在你的Vue项目中配置一个编译器（如Vue CLI、Vite等），然后运行你的项目。你可以尝试在你的组件中使用一些Element Plus的组件来确保它们正常工作。使用npm（或cnpm，如果你在中国并且希望使用淘宝的npm镜像）来安装Element Plus。这样，你就可以在你的Vue组件中使用Element Plus的图标了。在你的Vue 3项目的入口文件（通常是。
TypeScript — 泛型
最新发布
一只想躺平却不敢躺平的小菜鸟
05-09 133
TypeScript —— 泛型
offsetTop， scrollTop
07-27
- *3* [JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）](https://blog.csdn.net/m0_46833693/article/details/123186078)[target="_blank" data-report-click={"spm":"1018.2226.3001....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值