当网页内容无法全部显示在浏览器视窗中时，浏览器会自动添加滚动条，让我们可以滚动页面内容。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技术站
微信扫一扫 
支付宝扫一扫 