JS实现的页面自定义滚动条效果

下面是关于 “JS实现的页面自定义滚动条效果”的完整攻略。

1. 添加html结构

首先，我们需要在html中添加自定义滚动条的结构。通常，我们会添加三个元素：自定义滚动条容器、文本内容区域和滚动条本身。具体结构如下：

<div class="scroll-container">
  <div class="content">
    <!--文本内容-->
  </div>
  <div class="scroll-bar"></div>
</div>

其中，.scroll-container是自定义滚动条容器，.content是文本内容区域，.scroll-bar是滚动条本身。

接下来，我们需要设置这些元素的样式。一般情况下，我们会将.scroll-container设置为具有固定高度和宽度的块级元素，同时将.content设置为具有绝对定位的元素。另外，我们还需要设置.scroll-bar的宽度和位置。

/*自定义滚动条容器*/
.scroll-container {
  position: relative;
  overflow: hidden; /*隐藏溢出部分*/
  width: 300px;
  height: 150px;
}

/*文本内容区域*/
.content {
  position: absolute;
  top: 0;
  left: 0;
}

/*滚动条*/
.scroll-bar {
  position: absolute;
  right: 0;
  top: 0;
  background-color: #ccc;
  width: 10px;
  border-radius: 5px; /*设置边框圆角*/
}

2. 监听滚动事件

接下来，我们需要监听文本内容区域的滚动事件，以便同步滚动条的位置。我们可以使用scroll事件来实现这个功能。具体操作如下：

const container = document.querySelector('.scroll-container');
const content = document.querySelector('.content');
const scrollBar = document.querySelector('.scroll-bar');

container.addEventListener('scroll', function(e) {
  const maxScrollTop = content.offsetHeight - container.offsetHeight;
  const percentage = container.scrollTop / maxScrollTop;
  const scrollDistance = (container.offsetHeight - scrollBar.offsetHeight) * percentage;

  scrollBar.style.top = `${scrollDistance}px`;
});

上述代码中，我们首先获取了.scroll-container、.content和.scroll-bar元素。然后，我们添加了一个scroll事件监听器，用于同步滚动条的位置。

在监听事件函数中，我们首先计算了文本内容区域最大的滚动距离maxScrollTop。在计算百分比时，我们将容器内部纵向偏移量scrollTop除以maxScrollTop，得到当前滚动的百分比。

然后，我们计算出滚动条的位置 scrollDistance。将滚动百分比乘以容器的高度减去滚动条的高度，即可计算出滚动条的距离文本内容区域顶部的距离。最后，将滚动条的位置设置为计算出的距离。

3. 拖动滚动条

最后一个步骤是实现滚动条的拖动效果。我们可以添加mousedown、mousemove和mouseup事件来完成这个效果。具体操作如下：

scrollBar.addEventListener('mousedown', function(e) {
  const startClientY = e.clientY;
  const startScrollTop = container.scrollTop;

  document.addEventListener('mousemove', moveHandler);
  document.addEventListener('mouseup', upHandler);

  function moveHandler(e) {
    e.preventDefault();

    const distance = e.clientY - startClientY;
    const maxScrollTop = content.offsetHeight - container.offsetHeight;
    const percentage = distance / container.offsetHeight;
    container.scrollTop = startScrollTop + maxScrollTop * percentage;
  }

  function upHandler(e) {
    document.removeEventListener('mousemove', moveHandler);
    document.removeEventListener('mouseup', upHandler);
  }
});

上述代码中，我们首先给滚动条的.scroll-bar元素添加了一个mousedown事件监听器，用于开始拖动滚动条。在监听事件函数中，我们创建了两个变量：startClientY和startScrollTop。这两个变量分别用于保存鼠标按下时的clientY值和容器的scrollTop值。

然后，我们添加了一个mousemove事件监听器和一个mouseup事件监听器。在监听函数中，我们分别通过计算鼠标移动距离和滚动百分比来改变文本内容区域的scrollTop值。

最后，在mouseup事件监听器中，我们移除了mousemove和mouseup事件监听器，以结束拖动效果。

除了上述方法外，我们还可以使用第三方插件如perfect-scrollbar或iscroll.js来快速实现自定义滚动条效果。

示例

以下是两个示例：一个是基础版，一个是带缓动效果的版本。你可以在CodePen上查看完整代码：基础版 和 缓动版。