WebAPI-scroll系列属性

偏执的太偏执、 2023-06-19 16:20 335阅读 0赞

`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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

### 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>

![在这里插入图片描述][20191208133617322.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019120716025939.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[20191208133617322.png]: https://img-blog.csdnimg.cn/20191208133617322.png