关于滚动的属性和api整理

曾经终败给现在 2021-09-07 06:52 220阅读 0赞

## 容器元素 ##

element.scrollTop/scrollLeft 	 // 获取或设置一个元素的内容垂直滚动的像素数（可读可写）
    element.scrollHeight	 // 获取一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容（只读）
    
    element.scrollTo(x-coord, y-coord);	 // 使内容滚动到给定元素的指定坐标位置 
    element.scrollBy(x-coord, y-coord); 	// 每次滚动多少距离
    
    element.clientHeight	 // 如下图（只读）属性会将获取的值四舍五入取整数，如果你需要小数结果, 请使用 element.getBoundingClientRect().
    element.offsetHeight 	// 如下图（只读）

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

## 子元素（建议唯一） ##

element.offsetTop 	// 返回当前元素相对于其 offsetParent 元素的顶部内边距的距离（只读属性）

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70]: /images/20210813/d3e757edfa71462cb6f5cf7efcbf3f8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70 1]: /images/20210813/65cd111940e94f53901affe7037c4a26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70 2]: /images/20210813/756c54cfdc2042fe8821404b0c4e97a1.png