原生js实现自定义滚动条

实现自定义滚动条可以让页面看起来更加美观，并且可以提升用户体验。原生JS实现自定义滚动条的过程是比较复杂的，下面我将提供一份完整攻略。

前期准备

首先，我们需要准备一个带有滚动的内容块和一个用来代替原生滚动条的div。

<div class="scroll-wrapper">
  <div class="scroll-content">
    <!-- 省略部分内容 -->
  </div>
  <div class="scrollbar"></div>
</div>

其中，.scroll-wrapper是内容块的容器，.scroll-content是内容块，.scrollbar是代替原生滚动条的元素，初始时，.scrollbar应当有一个固定的宽度和高度，并且应当位于.scroll-wrapper容器的右侧。

实现滚动事件

接下来，我们需要监听内容块的滚动事件，并且同步滚动条的位置。

const contentEl = document.querySelector('.scroll-content');
const scrollbarEl = document.querySelector('.scrollbar');
const wrapperEl = document.querySelector('.scroll-wrapper');

contentEl.addEventListener('scroll', () => {
  const { scrollTop, scrollHeight, clientHeight } = contentEl;
  const scrollPercent = scrollTop / (scrollHeight - clientHeight) * 100;
  scrollbarEl.style.top = `${scrollPercent}%`;
});

在滚动事件中，我们通过计算当前滚动的百分比来更新滚动条的位置。这里用到了ES6的解构语法，获取了scrollTop、scrollHeight和clientHeight三个参数。计算当前滚动的百分比时，将scrollTop除以scrollHeight - clientHeight得到，然后将结果乘以100，就能得到当前滚动的百分比了。最后将滚动条的top属性设置为百分比即可。

实现拖动事件

接下来，我们需要实现滚动条的拖动事件。我们可以通过监听滚动条的mousedown事件来启动拖动事件。在拖动事件中，需要计算当前鼠标的位置，根据鼠标的位置计算出滚动条应该到达的位置。

let isDragging = false;
let offset = 0;

scrollbarEl.addEventListener('mousedown', (e) => {
  isDragging = true;
  offset = e.clientY - scrollbarEl.getBoundingClientRect().top;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const { top: wrapperTop, height: wrapperHeight } = wrapperEl.getBoundingClientRect();
  const barHeight = scrollbarEl.offsetHeight;
  const minY = wrapperTop;
  const maxY = wrapperTop + wrapperHeight - barHeight;
  const newY = e.clientY - offset;

  if (newY < minY) {
    scrollbarEl.style.top = 0;
    contentEl.scrollTop = 0;
    return;
  }

  if (newY > maxY) {
    scrollbarEl.style.top = `${maxY - wrapperTop}px`;
    contentEl.scrollTop = contentEl.scrollHeight;
    return;
  }

  const newScrollTop = (newY - minY) / (maxY - minY) * (contentEl.scrollHeight - contentEl.clientHeight);
  contentEl.scrollTop = newScrollTop;
  scrollbarEl.style.top = `${newY - wrapperTop}px`;
});

在拖动事件中，我们需要计算出滚动条可以拖动的最小值和最大值，然后根据鼠标的位置计算出滚动条应该到达的位置。需要注意的是，判断滚动条的最小和最大值的时候，要考虑滚动条自身的高度。

示例说明

这里提供两个示例。

示例1：垂直方向滚动条

下面这个示例演示了如何实现垂直方向的自定义滚动条。

<div class="scroll-wrapper" style="height: 400px;">
  <div class="scroll-content" style="height: 800px;">
    <!-- 填充内容 -->
  </div>
  <div class="scrollbar" style="width: 8px;"></div>
</div>

这里设置.scroll-wrapper的高度为400px，.scroll-content的高度为800px。滚动条的宽度设置为8px。这样，当内容高度大于容器高度时，就会出现滚动条。

示例2：水平方向滚动条

下面这个示例演示了如何实现水平方向的自定义滚动条。

<div class="scroll-wrapper" style="width: 400px; white-space: nowrap;">
  <div class="scroll-content" style="display: inline-block;">
    <!-- 填充内容 -->
  </div>
  <div class="scrollbar" style="height: 8px;"></div>
</div>

这里需要将.scroll-content设置为display: inline-block，使其不换行。另外，需要将.scroll-wrapper设置为横向滚动。这里将其设置为white-space: nowrap，表示不换行。滚动条的高度设置为8px。这样，当内容宽度大于容器宽度时，就会出现水平方向的滚动条。

总结

以上就是实现自定义滚动条的完整攻略。虽然需要一定的JS基础，但只要按照上述步骤实现，就能轻松地实现自定义滚动条。