一起看看 scrollHeight,clientHeight,offsetHeight,scrollTop是个啥
scrollHeight最终数值的组成:
var scrollHeight = currentElementContent.height +currentElement.paddingTop+currentElement.paddingBottom
官方的解释是：scrollHeight的高度等于当内容完全适配浏览器viewpoint后的高度，这个高度包括padding-top以及padding-bottom。除此之外，如果内容超出了浏览器view窗口，scrollHeight反映的也是内容实际高度（selfheight+paddingTop+paddingBottom）。
如图：
scrollTop官方给出的解释是：它反映的是内容被垂直滚动的距离，当浏览器视窗没有垂直滚动条时，scrollTop的值是0
offsetHeight最终的数值组成
var offsetHeight = elementHeight + elementPaddingTop+elementPaddingBottom+elementBorderTop+elementBorderBottom+elementHorizontalScrollar
官方给出的解释是：offsetHeight反映的是元素css设定的height（包括垂直方向的padding，border，以及水平方向的滚动条）
如图：
clientHeight最终数值的组成
var clientHeight = elementHeight+ elementPaddingTop+elementPaddingBottom- height of horizontal(if present)
官方的解释是：clientHeight反映的是元素自身的高度，其中包裹padding在垂直方向的高度。
参考资料：
容易混淆的client-*,scroll-*,offset-*
一起看看 scrollHeight,clientHeight,offsetHeight,scrollTop是个啥的更多相关文章
- Height、clientHeight、scrollHeight、offsetHeight 、scrollTop、offsetTop
Height 返回当前文档中的<body>元素的高度 clientHeight 对于没有定义CSS或者内联布局盒子的元素为0,否则,它是元素内部的高度(单位像素),包含内边距,但不包括水平 ...
- JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念
JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能,其中使用最多的场景是加载更多,当鼠标滚动至页面下方时,自动加载下一页的内容.另一个常用的场景是当用户滚动至页面某一地方时,页面会给出提 ...
- 理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight
一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和o ...
- 转 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight
1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 复制代码 代码如下: <div style=" position:absolute; ...
- top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight
1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略 2.posTop posTop的数值其实和top是一样的,但区别在于,top固定了元素单位为px,而p ...
- 页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe
1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 代码如下: <div style=" position:absolute; widt ...
- clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系
style.height 包括 元素的滚动条,不包括边框clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeightoff ...
- offsetTop/offsetHeight scrollTop/scrollHeight 的区别
offsetTop/offsetHeight scrollTop/scrollHeight 这几个属性困扰了我N久,这次一定要搞定. 假设 obj 为某个 HTML 控件. obj.offset ...
- 各种高度的区别及height、clientHeight、scrollHeight、offsetHeight的区分
1.height.clientHeight.scrollHeight.offsetHeight 我们来实现test中的onclick事件 function justAtest() { ...
随机推荐
- 容器ConcurrentHashMap原理(学习)
一.概述 HashMap 是非线程安全的,在不考虑性能问题的时候,我们的解决方案有 Hashtable 或者Collections.synchronizedMap(hashMap),这两种方式基本都是 ...
- 上百例Silverlight网站及演示汇总，供友参考
毁灭2012 博客园 首页 新闻 新随笔 联系 管理 订阅 随笔- 125 文章- 0 评论- 446 上百例Silverlight网站及演示汇总,供友参考 今天我将发现的Silverlig ...
- python 获取当前文件夹路径及父级目录的几种方法
获取当前文件夹路径及父级目录: import os current_dir = os.path.abspath(os.path.dirname(__file__)) print(current_dir ...
- js中setInterval() 和 setTimeout()
setInterval() 方法 定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearI ...
- Oracle.ManagedDataAccess.dll
C#使用Oracle.ManagedDataAccess.dll System.Data.OracleClient程序集没有多大的不同,基本上拿以前使用System.Data.OracleClient ...
- asp.net 4.0 尚未在服务商注册 您需要手动将web服务器配置为 ASP.NET4.0，这样您的网站才能正常进行。
VS2010打开项目出现的此问题 电脑先安装VS2010 然后安装VS2010 SP1补丁.然后安装VS2015 后来又安装了Framework4.6.1 用网上搜索到的平常方法无法解决此问题. 最后 ...
- C++中正确使用PRId64 （转载）
转自:http://blog.csdn.net/win_lin/article/details/7912693 例子参考高性能流媒体服务器SRS:https://github.com/winlinvi ...
- Commons-FileUpload 文件上传(模板)
// 创建FileItem工厂函数 FileItemFactory FIF = new DiskFileItemFactory(); // 获取ServletFileUpload对象,使用工厂实例传入 ...
- bzoj 2763: [JLOI2011]飞行路线【分层图+spfa】
为什么早年的题总是从0开始标号啊--又zz了一次WA 分层图的题只有这一个套路吧,建分层图,然后优化时间是分层跑spfa然后层与层之间单独跑即可 #include<iostream> #i ...
- 读懂mysql慢查询日志
我们来看一下如何去读懂这些慢查询日志.在跟踪慢查询日志之前,首先你得保证最少发生过一次慢查询.如果你没有可以自己制造一个:root@server# mysql -e 'SELECT SLEEP(8); ...