scrollTop、scrollHeight、offsetTop、offsetHeight、clientTop、clientHeight区别
带你搞清楚 scrollTop、scrollHeight、offsetTop、offsetHeight、clientTop、clientHeight 区别
clientHeight 和 offsetHeight 指的是元素的本身的高度，区别是 在元素设置
box-sizing: border-box时，clientHeight元素本身的高度 - 元素的边框；offsetHeight就是元素本身的高度
没有设置box-sizing: border-box时，clientHeight是元素的高度 + padding；offsetHeight是元素的高度 + padding + border注：offsetHeight不管有没有滚动轴都不影响
clientTop指的是上边框的宽度
offsetTop指的是元素距离具有定位元素的父元素的距离(都是边框外面开始计算)
在有滚动的元素的时候
scrollHeight会随着子元素的高度变化而变化，即使自身固定高度出现滚动轴，包括padding和子元素撑大的部分
- scrollHeigh：元素内容的全部高度，包括content、溢出的content、padding、伪元素。不包括元素的border和margin
- clientHeight：元素的可见部分高度，包括content、padding。不包括元素的border和margin
- offsetHeight：元素的实际占据高度，包括content、padding、border、滚动条。不包括伪元素
scrollTop指的是元素的滚动距离， 可读可写的一个属性
scrollTop、scrollHeight、offsetTop、offsetHeight、clientTop、clientHeight区别相关推荐
- scrollTop、offsetTop、clientTop
1.offsetTop: obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置. 2.clientTop: 这个返回的是元素周围边框的厚度, ...
- html 滚动条 scrolltop scrollheight,JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记...
全文参考:https://github.com/iuap-design/blog/issues/38 .MDN clientHeight,只读 clientHeight可以用公式 CSS height ...
- 关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究
我是以chrome浏览器做的研究. 先看一段代码: <script>window.addEventListener('DOMContentLoaded',function(){var no ...
- clientHeight offsetHeight scrollHeight offsetTop scrollTop
文章目录 各属性详解 实现 offsetParent.offsetLeft/offsetTop深度剖析 element.offsetParent 定义 祖先元素中不存在定位元素 webkit内核.Fi ...
- offsetTop,offsetHeight,scrollHeight,scrollTop的区别
offsetTop,offsetHeight,scrollHeight,scrollTop,这些属性曾经困扰了我很长很长很长时间. 今天花点功夫,彻底把他们搞清楚了. 假设 obj 为某个 HTML ...
- CSS中clientHeight、offsetHeight、scrollHeight、scrollTop、scrollTo几者的区别和关联
怎么区分clientHeight.offsetHeight.scrollHeight.scrollTo.scrollTop呢,我们通过下面的示例来搞清楚. 现有如下示例: 对应css为 .div {w ...
- JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍
一.先介绍clientHeight与scrollHeight的区别 clientHeight: 在页面上返回内容的可视高度(不包括边框,边距或滚动条) scrollHeight: 返回整个元素的高度( ...
- height clientHeight scrollHeight offsetHeight的大致区别
这主要是针对火狐浏览器来讲的: height:就是div的高度,就是style中设置的高度:在chrome中clientHeight是包含padding的,offsetHeight和clientHei ...
- Js中 关于top、clientTop、scrollTop、offsetTop的用法
2019独角兽企业重金招聘Python工程师标准>>> Js中 关于top.clientTop.scrollTop.offsetTop的用法 网页可见区域宽: document.bo ...
- 一篇弄懂 offsetWidth、offsetHeight、offsetleft、offsetTop和offsetParent的区别！（1）
快速理解offset之间的区别 1.offsetWidth与offsetHeight 2.offsetParent 3.offsetleft.offsetTop 以下代码均在Chrome浏览器中测试 ...
最新文章
- css :hover
- 您应该知道的6个物联网术语—Vecloud微云
- Java数据结构和算法（七）——链表
- oracle 日志写满,Oracle归档日志写满错误解决方法
- JAVA 内存泄露详解（原因、例子及解决）
- strictmath_Java StrictMath sqrt（）方法与示例
- 《Java8实战》笔记（05）：使用流
- oracle sql 语句如何插入全年日期？
- php和windows对应,哪个.so文件可以用于windows系统中与.dll文件相对应的linux系统，以便将php连接到ms sql server...
- xml，String互转
- Error:Failed to open zip file. Re-download dependencies and sync project
- 运维工具之科来网络分析系统安装和使用
- 体验极好的临时邮箱,10分钟邮箱，极美观，速度特别快
- RTP传输JPEG图片到VLC实时播放(代码)
- Android自定义日历控件
- 最低销售量计算机公式,最低、最高、安全库存量的计算公式
- 笨拙的手指(暴力枚举)
- 计算机毕业设计如何制作电子商务网站怎么制作购物网站计算机课程设计电子商城做什么(PHP-ASP.NET-c#-JavaWeb-SSM-SSH-J2EE-springBoot
- 量子BB84,B92协议简单介绍
- 短信管理器android,短信夹管理软件-短信夹管理app预约v1.4.3 安卓版-西西软件园...