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

scrollTop

clientHeight

offsetHeight

一起看看 scrollHeight,clientHeight,offsetHeight,scrollTop是个啥的更多相关文章

  1. Height、clientHeight、scrollHeight、offsetHeight 、scrollTop、offsetTop

    Height 返回当前文档中的<body>元素的高度 clientHeight 对于没有定义CSS或者内联布局盒子的元素为0,否则,它是元素内部的高度(单位像素),包含内边距,但不包括水平 ...

  2. JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念

    JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能,其中使用最多的场景是加载更多,当鼠标滚动至页面下方时,自动加载下一页的内容.另一个常用的场景是当用户滚动至页面某一地方时,页面会给出提 ...

  3. 理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight

    一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和o ...

  4. 转 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight

    1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 复制代码 代码如下: <div style=" position:absolute; ...

  5. top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight

    1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略 2.posTop posTop的数值其实和top是一样的,但区别在于,top固定了元素单位为px,而p ...

  6. 页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe

    1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 代码如下: <div style=" position:absolute; widt ...

  7. clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系

    style.height 包括 元素的滚动条,不包括边框clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeightoff ...

  8. offsetTop/offsetHeight scrollTop/scrollHeight 的区别

    offsetTop/offsetHeight   scrollTop/scrollHeight  这几个属性困扰了我N久,这次一定要搞定. 假设 obj 为某个 HTML 控件. obj.offset ...

  9. 各种高度的区别及height、clientHeight、scrollHeight、offsetHeight的区分

    1.height.clientHeight.scrollHeight.offsetHeight 我们来实现test中的onclick事件    function justAtest()    {    ...

随机推荐

  1. 龙尚3G、4G模块嵌入式Linux系统使用说明【转】

    本文转载自;http://blog.csdn.net/zqixiao_09/article/details/52506812 驱动部分: 1.kernle/drivers/usb/serial/opt ...

  2. Weex 和 React Native 的比较看这里

    写在前面 目前主流的应用大体分成三类:Native App, Web App, Hybrid App. Native App 特点: 性能好 完美的用户体验 开发成本高,无法跨平台 升级困难 (审核) ...

  3. 【Silverlight】Bing Maps学习系列（六）：使用扩展模式（Extended Modes）（转）

    [Silverlight]Bing Maps学习系列(六):使用扩展模式(Extended Modes) 微软Bing Maps推出有有段时间了,通过不断的改进和新的地图更新,现在已经基本上形成了一套 ...

  4. 洛谷 P1570【NOIP2013】花匠

    题目描述 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大,也越来越挤.栋栋决定 把这排中的一部分花移走,将剩下的留在原地,使得剩下的花能有空间长大,同时,栋栋希 望剩下的花排列得比较别致. 具 ...

  5. 编译Ruby2.0 问题解决

    compiling readline.creadline.c: In function ‘Init_readline’:readline.c:1886:26: error: ‘Function’ un ...

  6. bzoj 4756: [Usaco2017 Jan]Promotion Counting【dfs+树状数组】

    思路还是挺好玩的 首先简单粗暴的想法是dfs然后用离散化权值树状数组维护,但是这样有个问题就是这个全局的权值树状数组里并不一定都是当前点子树里的 第一反应是改树状数组,但是显然不太现实,但是可以这样想 ...

  7. 基于Numpy的神经网络+手写数字识别

    基于Numpy的神经网络+手写数字识别 本文代码来自Tariq Rashid所著<Python神经网络编程> 代码分为三个部分,框架如下所示: # neural network class ...

  8. 规范化创建一个vs2017 Mvc框架项目

    vs2107 + dapper + MiniUi 标准化分层封装使 3.1 规范化创建一个vs2017 Mvc框架项目 此时创建的项目勾选 添加单元测试. 添加一个类库,主要用于实体类操作,类库名称 ...

  9. MVC、MVP和MVVM的图示

    一.MVC MVC模式的意思是,软件可以分成三个部分. 视图(View):用户界面. 控制器(Controller):业务逻辑 模型(Model):数据保存 各部分之间的通信方式如下. View 传送 ...

  10. [C++ STL] 各容器简单介绍

    什么是STL? 1.STL(Standard Template Library),即标准模板库,是一个高效的C++程序库. 2.包含了诸多常用的基本数据结构和基本算法.为广大C++程序员们提供了一个可 ...