元素滚动 scroll 系列属性
scroll 系列属性主要用于描述元素内容与可视区域的滚动关系，分为两类：
- 滚动位置属性：可读可写。用于控制或获取元素内容被滚动隐藏的距离。
element.scrollTop：元素内容垂直向上滚动的像素值，即顶部被隐藏的高度。常用于控制垂直滚动、判断是否滚动到底部。element.scrollLeft：元素内容水平向左滚动的像素值，即左侧被隐藏的宽度。常用于控制水平滚动、判断是否滚动到最右侧。
- 内容尺寸属性：只读属性。用于获取元素内容的总尺寸（包含被隐藏部分）。
element.scrollWidth：元素内容的总宽度，不包含滚动条宽度。可用于计算内容总宽度、判断是否有水平滚动条。element.scrollHeight：元素内容的总高度，不包含滚动条高度。可用于计算内容总高度、判断是否滚动到底部。
下图展示了 scrollTop 属性的含义，它是顶部被隐藏的高度，数值等于元素顶部被隐藏的位置减去父容器边框下沿位置：
代码示例
我们创建一个 200x150 像素的滚动容器，设置 overflow: auto。当内容溢出时自动显示滚动条，未溢出则隐藏。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Scroll 系列属性示例</title>
<style>
#scrollBox {
/* 滚动容器 */
width: 200px;
height: 150px;
overflow: auto; /* 内容溢出时自动显示滚动条 */
border: 1px solid #ccc;
margin: ;
}
{
: ;
: ;
: (red, blue);
}
{
: ;
}
获取滚动属性
滚动到底部
滚动到最右侧
