一个滚动条的诞生：从陌生到熟悉

前端

2023-12-09 19:20:58

从陌生到熟悉

滚动条，一个既熟悉又陌生的存在。熟悉是因为它无处不在，每天都会与之打交道；陌生是因为在成熟的组件库中似乎找不到它的身影。

为何手撸？

既然有现成的轮子，为何还要自己造呢？原因有二：

定制化需求： 现成的滚动条组件往往无法满足特定的需求，例如自定义样式、特殊交互等。
学习与理解： 通过亲手构建滚动条组件，可以深入理解其内部机制，为后续的Web开发打下坚实的基础。

从零开始

构建滚动条组件的第一步是理解其工作原理。滚动条本质上是一个容器，内部包含一个可滚动的子元素。当子元素的高度超过容器高度时，就会出现滚动条，允许用户通过拖动或滚动鼠标滚轮来浏览子元素的内容。

技术选型

滚动条组件的构建涉及到CSS和JavaScript两种技术。CSS用于定义滚动条的样式，而JavaScript用于实现滚动条的交互逻辑。

CSS样式

滚动条的CSS样式主要包括以下部分：

容器样式： 定义滚动条的尺寸、位置和溢出行为。
滚动槽样式： 定义滚动条的背景颜色、宽度和圆角。
滑块样式： 定义滑块的尺寸、背景颜色和圆角。

JavaScript交互

滚动条的交互逻辑主要通过JavaScript实现，包括以下功能：

拖动滑块： 监听鼠标拖动事件，更新滑块的位置并同步滚动子元素的内容。
滚动滚轮： 监听滚轮滚动事件，更新滑块的位置并同步滚动子元素的内容。
自动滚动： 根据指定的间隔自动滚动子元素的内容。

示例代码

以下是一个简单的滚动条组件示例代码：

/* 容器样式 */
.scrollbar-container {
  width: 200px;
  height: 300px;
  overflow: scroll;
}

/* 滚动槽样式 */
.scrollbar-track {
  background-color: #f5f5f5;
  width: 10px;
  border-radius: 5px;
}

/* 滑块样式 */
.scrollbar-thumb {
  background-color: #333;
  width: 10px;
  height: 50px;
  border-radius: 5px;
}

// 监听鼠标拖动事件
document.querySelector('.scrollbar-thumb').addEventListener('mousedown', (e) => {
  const scrollbarTrack = document.querySelector('.scrollbar-track');
  const scrollbarThumb = document.querySelector('.scrollbar-thumb');

  // 记录鼠标按下时的位置
  const mouseDownPos = e.clientY;
  const thumbPos = scrollbarThumb.offsetTop;

  // 监听鼠标移动事件
  document.addEventListener('mousemove', (e) => {
    // 计算鼠标移动的距离
    const mouseMovePos = e.clientY;
    const deltaY = mouseMovePos - mouseDownPos;

    // 更新滑块位置
    scrollbarThumb.style.top = `${thumbPos + deltaY}px`;

    // 同步滚动子元素内容
    const scrollbarContainer = document.querySelector('.scrollbar-container');
    scrollbarContainer.scrollTop = deltaY * scrollbarContainer.scrollHeight / scrollbarTrack.clientHeight;
  });

  // 监听鼠标松开事件
  document.addEventListener('mouseup', () => {
    // 移除鼠标移动事件监听器
    document.removeEventListener('mousemove');
  });
});