WebAPI-scroll系列属性

最新推荐文章于 2025-05-18 00:26:40 发布

原创最新推荐文章于 2025-05-18 00:26:40 发布 · 885 阅读

2 ·

CC 4.0 BY-SA版权

WebAPI 专栏收录该内容

29 篇文章

订阅专栏

WebAPI的scroll属性用于动态获取元素的滚动信息。scrollWidth返回内容的完整宽度，包括不可见部分；scrollHeight返回内容的完整高度，两者都包含内边距但不包括边框和外边距。scrollTop表示元素顶部距离视口顶部的距离，而scrollLeft表示元素左侧距离视口左侧的距离，这两个属性可读写，用于控制元素的滚动位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

scroll 就是滚动的意思，使用 scroll 系列的相关属性可以动态的得到元素的内容大小、滚动距离等；通过该系列的属性获取到的值均为数值类型，没有单位。

scrollWidth

element.scrollWidth 获取元素元素内容的宽度，是个只读属性，包括 overflow 溢出而在屏幕上不可见的内容。

scrollHeight

element.scrollHeight 获取元素元素内容的高度，是个只读属性，包括溢出的内容 overflow 溢出而在屏幕上不可见的内容。

注意：通过 scrollWidth、scrollHeight 获取的宽高包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。
CSS：

p {
  width: 120px;
  height: 100px;
  border: 1px solid gray;
}

HTML：

<p>
  这是一段文本
  这是一段文本
  这是一段文本
  这是一段文本
  这是一段文本
  这是一段文本
  这是一段文本
  这是一段文本
</p>
<script type="text/javascript">
function $(selector) {
  return document.querySelector(selector)
}

console.log('width', $('p').scrollWidth) // 120
console.log('height', $('p').scrollHeight) // 146
</script>

在这里插入图片描述

scrollTop

element.scrollTop 获取或设置一个元素的顶部到视口顶部的距离；就是元素向上滚动的距离，只要元素在视口顶部的下方则 scrollTop 默认为 0。

scrollLeft

element.scrollLeft 获取或设置一个元素的左侧到视口左侧的距离；就是元素向左滚动的距离；如果元素不能滚动则 sctollLeft 的值默认为 0。

.box {
  width: 120px;
  height: 100px;
  background: purple;
}

<div class="box"></div>
<script type="text/javascript">
	function $(selector) {
	  return document.querySelector(selector)
	}
	
	console.log('top', $('.box').scrollTop)
	console.log('left', $('.box').scrollLeft)
</script>

在这里插入图片描述