js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍

当网页内容无法全部显示在浏览器视窗中时，浏览器会自动添加滚动条，让我们可以滚动页面内容。JavaScript提供了一些属性和方法来控制滚动条，其中包括scrollHeight、scrollWidth、scrollTop等属性。下面就对这些属性在JavaScript中的应用做详细介绍。

scrollHeight属性

scrollHeight属性定义元素内容的高度，包括内容的高度和溢出部分的高度。当内容的实际高度大于垂直限制时，此属性将会出现滚动条。以下是一个实例：

<!DOCTYPE html>
<html>
<body>
    <div style="border:1px solid black;height:80px;width:80px;overflow:auto;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis risus nisl, pretium vel eros vel, blandit
        fermentum risus. Nulla ac quam risus. Cras dictum risus vitae elit consequat, a rutrum ipsum mollis. Donec
        tellus odio, convallis eget erat vel, laoreet vulputate eros. Fusce in varius ipsum. Donec egestas interdum
        felis.
    </div>
    <p>scrollHeight: <span id="demo"></span></p>
    <script>
        var x = document.getElementsByTagName("div")[0].scrollHeight;
        document.getElementById("demo").innerHTML = x;
    </script>
</body>
</html>

scrollWidth属性

scrollWidth属性定义元素内容的高度，包括内容的宽度和溢出部分的宽度。当内容的实际宽度大于水平限制时，此属性将会出现滚动条。以下是一个实例：

<!DOCTYPE html>
<html>
<body>
    <div style="border:1px solid black;height:80px;width:80px;overflow:auto;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis risus nisl, pretium vel eros vel, blandit
        fermentum risus. Nulla ac quam risus. Cras dictum risus vitae elit consequat, a rutrum ipsum mollis. Donec
        tellus odio, convallis eget erat vel, laoreet vulputate eros. Fusce in varius ipsum. Donec egestas interdum
        felis.
    </div>
    <p>scrollWidth: <span id="demo"></span></p>
    <script>
        var x = document.getElementsByTagName("div")[0].scrollWidth;
        document.getElementById("demo").innerHTML = x;
    </script>
</body>
</html>

scrollTop属性

scrollTop属性获取或设置的是一个元素的从顶部开始的滚动偏移量。例如，值为0表示元素顶部位于可见区域的顶部，值为element.scrollHeight表示元素的底部位于可见区域的底部。以下是一个实例：

<!DOCTYPE html>
<html>
<body>
    <div style="border:1px solid black;height:80px;width:80px;overflow:auto;" onscroll="myFunction()">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis risus nisl, pretium vel eros vel, blandit
        fermentum risus. Nulla ac quam risus. Cras dictum risus vitae elit consequat, a rutrum ipsum mollis. Donec
        tellus odio, convallis eget erat vel, laoreet vulputate eros. Fusce in varius ipsum. Donec egestas interdum
        felis.
    </div>
    <p>The div element's scrolling position is <span id="demo"></span> pixels.</p>

    <script>
        function myFunction() {
            var elmnt = document.getElementsByTagName("div")[0];
            var y = elmnt.scrollTop;
            document.getElementById("demo").innerHTML = y;
        }
    </script>
</body>
</html>

scrollLeft属性

scrollLeft属性获取或设置的是一个元素的从左侧开始的滚动偏移量。例如，值为0表示元素左侧位于可见区域的左侧，值为element.scrollWidth表示元素的右侧位于可见区域的右侧。以下是一个实例：

<!DOCTYPE html>
<html>
<body>
    <p>Click the button to get the horizontal scroll position of the document.</p>

    <button onclick="myFunction()">Try it</button>

    <p>The document's horizontal scrolling position is <span id="demo"></span> pixels.</p>

    <script>
        function myFunction() {
            var elmnt = document.documentElement;
            var x = elmnt.scrollLeft;
            document.getElementById("demo").innerHTML = x;
        }
    </script>
</body>
</html>

综上所述，scrollHeight、scrollWidth、scrollTop以及scrollLeft这几个JavaScript属性都可以用于在动态控制页面的滚动条位置，便于优化页面交互效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍 - Python技术站