滚动条 API

JS

基础API

获取滚动位置

• 对于整个标签页：windows.scrollX和windows.scrollY
• 对于某个元素：使用element.scrollTop和element.scrollLeft属性来获取垂直和水平方向上滚动条的位置

控制滚动行为

• scrollTo() - 滚动到指定位置
• scrollBy() - 相对当前位置滚动一定距离

滑动条对齐原理

滑动条比例关系

滑动条比例 = 容器宽度 / 总内容宽度

滑动条两端分别对齐滑动窗口的边界，滑动条的位置反映了当前可视区域在总内容中的位置。

scrollBy的实现

scrollBy就是移动一段距离，结合getBoundingClientRect可以实现自动滑动：

• 计算目标元素离视口的距离
• 滚动相应的距离
• 这样就能将目标元素滚动进视图中

// 示例：将元素滚动到可视区域
function scrollIntoView(element) {
  const rect = element.getBoundingClientRect();
  const scrollDistance = rect.top;
  window.scrollBy(0, scrollDistance);
}