• 一起看看 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

    scrollTop

    clientHeight

    offsetHeight

  • 相关阅读:
    python--输出spwm的数组
    爬虫二:爬取糗事百科段子
    爬虫一:爬取信息
    Python中的切片操作
    JSON
    python 中的异常处理与种类
    register的功能
    static的功能
    网络安全的认识
    VMware5.5-vCenter Converter(转换)
  • 原文地址:https://www.cnblogs.com/mrdooo/p/6635865.html
Copyright © 2020-2023  润新知