原生JS实现自定义滚动条效果

下面是详细讲解原生JS实现自定义滚动条效果的完整攻略。

1. 前置知识

在实现自定义滚动条之前，你需要掌握基础的 HTML、CSS、JavaScript 知识，特别是以下内容：

• HTML 中设置元素的高度和宽度
• CSS 中设置 overflow 属性和滚动条样式
• JavaScript 中事件的绑定和移除、元素的属性操作、定时器的使用等

2. 实现思路

实现自定义滚动条的基本思路是：用一个 div 容器包含两个子元素，一个是内容区域，一个是滚动条区域；然后通过 JavaScript 来实现滚动条的拖拽效果，最后再将滚动条触发的事件与内容区域关联起来，实现内容的滚动。

可以将实现自定义滚动条的过程分为以下几个步骤：

1. 构建基本框架：创建一个 div 容器，设置其高度和宽度，以及样式。
2. 添加内容区域：在容器中添加内容区域，即需要滚动的内容，设置其高度和宽度，按需添加样式。
3. 添加滚动条区域：在容器中添加滚动条区域，设置其高度和宽度，按需添加样式。
4. 实现滚动条拖拽效果：绑定事件，实现鼠标按下、移动、松开时滚动条的位置变化。
5. 关联滚动条与内容区域：监控滚动条位置，根据滚动条位置计算出内容区域的相应位置，将两者关联起来。

3. 实例1：自定义水平滚动条

3.1 HTML 结构

我们首先来看该示例的 HTML 结构：

<div class="horizontal-scroll">
  <div class="content">
    <p>这是一段需要滚动的内容。</p>
  </div>
  <div class="scroll-bar"></div>
</div>

该结构包含了一个 div 容器和两个子元素，一个是内容区域，一个是滚动条区域。我们在 CSS 中设置这些元素的样式，包括容器的宽度、高度、背景色、内边距等。

3.2 CSS 样式

接下来，我们需要设置 CSS 样式。具体代码如下：

.horizontal-scroll {
  width: 400px;
  height: 300px;
  background-color: #eee;
  padding: 10px;
  position: relative;
}

.content {
  width: 900px;
  height: 280px;
  overflow: hidden;
}

.content p {
  width: 100%;
  height: 280px;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  white-space: nowrap;
}

.scroll-bar {
  width: 390px;
  height: 10px;
  background-color: #333;
  position: absolute;
  bottom: 0;
  left: 10px;
}

这些样式设置了水平滚动条容器、内容区域、滚动条的样式。

3.3 JavaScript 实现

最后，我们需要使用 JavaScript 实现滚动条的拖拽效果，并将滚动条与内容区域关联起来。以下是代码实现：

var container = document.querySelector('.horizontal-scroll');
var content = container.querySelector('.content');
var bar = container.querySelector('.scroll-bar');

var barWidth = bar.getBoundingClientRect().width;
var containerWidth = container.getBoundingClientRect().width;
var maxScrollLeft = content.getBoundingClientRect().width - containerWidth;

bar.addEventListener('mousedown', function(e) {
  var startX = e.clientX;
  var barLeft = bar.offsetLeft;

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

  function moveHandler(e) {
    var left = barLeft + (e.clientX - startX);

    if (left < 0) {
      left = 0;
    } else if (left + barWidth > containerWidth) {
      left = containerWidth - barWidth;
    }

    setBarLeft(left);
    setScrollLeft(left / (containerWidth - barWidth) * maxScrollLeft);
  }

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

  e.preventDefault();
});

function setBarLeft(left) {
  bar.style.left = left + 'px';
}

function setScrollLeft(left) {
  content.scrollLeft = left;
}

首先，我们定义了三个变量 container、content 和 bar 分别表示容器、内容区域和滚动条。然后，我们计算出了滚动条实际的宽度 barWidth、容器的宽度 containerWidth 和最大的滚动距离 maxScrollLeft。

接着，我们绑定了鼠标按下事件，实现了滚动条的拖拽效果。在该事件中，我们定义了三个变量：startX 表示鼠标按下时的位置、barLeft 表示滚动条离容器左边的距离、left 表示滚动条当前应该所在的位置。然后，我们通过 setBarLeft 函数将滚动条移动到 left 位置，通过 setScrollLeft 函数将内容区域滚动到相应位置。注意，我们还需要对 left 值进行一些边界检查。

最后，我们需要定义 setBarLeft 和 setScrollLeft 两个函数，实现滚动条与内容区域的联动。

4. 实例2：自定义垂直滚动条

4.1 HTML 结构

代码如下：

<div class="vertical-scroll">
  <div class="content">
    <p>这是一段需要滚动的内容。</p>
    <p>这是一段需要滚动的内容。</p>
    <p>这是一段需要滚动的内容。</p>
    <p>这是一段需要滚动的内容。</p>
    <p>这是一段需要滚动的内容。</p>
    <p>这是一段需要滚动的内容。</p>
    <p>这是一段需要滚动的内容。</p>
    <p>这是一段需要滚动的内容。</p>
    <p>这是一段需要滚动的内容。</p>
    <p>这是一段需要滚动的内容。</p>
  </div>
  <div class="scroll-bar"></div>
</div>

该结构和水平滚动条结构类似，只不过将宽度改为了高度。

4.2 CSS 样式

代码如下：

.vertical-scroll {
  width: 400px;
  height: 300px;
  background-color: #eee;
  padding: 10px;
  position: relative;
}

.content {
  width: 380px;
  height: 600px;
  overflow: hidden;
}

.content p {
  width: 350px;
  margin: 0;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.scroll-bar {
  width: 10px;
  height: 240px;
  background-color: #333;
  position: absolute;
  top: 10px;
  right: 0;
}

这些样式设置了垂直滚动条容器、内容区域、滚动条的样式。

4.3 JavaScript 实现

代码如下：

var container = document.querySelector('.vertical-scroll');
var content = container.querySelector('.content');
var bar = container.querySelector('.scroll-bar');

var barHeight = bar.getBoundingClientRect().height;
var containerHeight = container.getBoundingClientRect().height;
var maxScrollTop = content.getBoundingClientRect().height - containerHeight;

bar.addEventListener('mousedown', function(e) {
  var startY = e.clientY;
  var barTop = bar.offsetTop;

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

  function moveHandler(e) {
    var top = barTop + (e.clientY - startY);

    if (top < 0) {
      top = 0;
    } else if (top + barHeight > containerHeight) {
      top = containerHeight - barHeight;
    }

    setBarTop(top);
    setScrollTop(top / (containerHeight - barHeight) * maxScrollTop);
  }

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

  e.preventDefault();
});

function setBarTop(top) {
  bar.style.top = top + 'px';
}

function setScrollTop(top) {
  content.scrollTop = top;
}

与水平滚动条类似，我们也需要定义三个变量 container、content 和 bar，分别表示容器、内容区域和滚动条，并计算出滚动条实际的高度 barHeight、容器的高度 containerHeight 和最大的滚动距离 maxScrollTop。

然后，我们绑定了鼠标按下事件，实现了滚动条的拖拽效果，具体处理过程与水平滚动条类似。最后，我们需要定义 setBarTop 和 setScrollTop 两个函数，实现滚动条与内容区域的联动。

5. 总结

本文讲解了如何使用原生 JavaScript 实现自定义滚动条效果，包括实现思路、示例代码和注意事项。使用自定义滚动条的好处在于，可以更好地控制滚动条的样式和行为，并且可以提升用户体验。因此，在实际开发中，尽可能地使用自定义滚动条是一个不错的选择。