zoukankan      html  css  js  c++  java
  • scrollTop、scrollLeft、scrollWidth、scrollHeight原理使用介绍


    scrollTop、scrollLeft、scrollWidth、scrollHeight

    上面是一个网页,由于窗口大限的限制,没有完全显示出来,没有显示出来的,用阴影标注了。

    • 上阴影就是 scrollTop;
    • 上阴影 + 白的 + 下阴影就是 scrollHeight。

    scrollTop 是“卷”起来的高度值,示例:

    <div style="200px;height:200px;background-color:#999999;overflow:hidden;" id="p">
      <div style="100px;height:300px;background-color:#FFFF00;" id="t">如果为 p 设置了 scrollTop,这些内容可能不会完全显示。</div>
    </div>
    <script type="text/javascript">
    <!--
    var p = document.getElementById("p");
    p.scrollTop = 10;
    //-->
    </script>

    scrollTop、scrollLeft

    由于为外层元素 p(注意是 p,不是 t)设置了 scrollTop,所以内层元素会向上“卷”,这卷起来的部分就是 scrollTop

    scrollLeft 也是类似道理。

    scrollWidth、scrollHeight

    我们已经知道 offsetHeight自身元素的高度,而 scrollHeight内层元素的实际高度 + 外层元素 padding,包含内层元素的隐藏的部分。

    上述中 p(注意是 p,不是 t)的 offsetHeight 为 200,而其 scrollHeight 为 300。如果 p 具有 padding,那么应该把 padding 算到 scrollHeight 中,但其 border、margin 不应计算在内。

    scrollHeight 也是类似道理。

    IE 和 FireFox 全面支持,而 Netscape 8(很老了) 和 Opera 7.6(很老了) 不支持 scrollTop、scrollLeft(document.body.scrollTop、document.body.scrollLeft 除外)。

  • 相关阅读:
    DC中为什么要用Uniquify?
    hdu 1596 find the safest road
    hdu2112 HDU Today
    hdu 2066 一个人的旅行
    poj 3026 Borg Maze
    poj 1979 Red and Black
    poj 1321 棋盘问题
    hdu 1010 Tempter of the Bone
    hdu 4861 Couple doubi
    codeforces584B Kolya and Tanya
  • 原文地址:https://www.cnblogs.com/lidabo/p/2473016.html
Copyright © 2011-2022 走看看