原生js实现自定义滚动条组件

下面是“原生js实现自定义滚动条组件”的完整攻略：

1.需求分析

首先需要明确我们要实现什么，即自定义滚动条组件应该具备以下功能：

• 拥有滚动条，可以实现滚动内容；
• 拥有上下箭头和滑块，可以通过拖拽滑块或点击箭头实现滚动；
• 拥有水平和垂直两种滚动方式，可以根据需要选择滚动的方向。

基于上述需求，我们可以先实现一个基础版的自定义滚动条组件，然后再逐步添加更多的功能。

2.基础版实现

我们可以将组件的html结构定义如下：

<div class="scroll-wrapper">
  <div class="scroll-content">
    <!-- 需要滚动的内容 -->
  </div>
  <div class="scroll-bar">
    <div class="scroll-slider"></div>
  </div>
</div>

其中，“scroll-wrapper”是容器的样式类，“scroll-content”是需要滚动的内容，“scroll-bar”是滚动条的样式类，“scroll-slider”是滑块的样式类。

然后，我们可以使用css样式来实现基础版的滚动条组件：

.scroll-wrapper {
  position: relative;
  width: 400px; /* 容器的宽度 */
  height: 300px; /* 容器的高度 */
  overflow: hidden;
}
.scroll-content {
  position: absolute;
  left: 0;
  top: 0;
  padding-right: 30px; /* 预留出滚动条宽度 */
}
.scroll-bar {
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 100%;
  background-color: #eee;
}
.scroll-slider {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50px; /* 滑块的高度 */
  background-color: #555;
  border-radius: 5px;
  cursor: pointer;
}

以上样式实现了基础版的自定义滚动条组件，其中通过“position: absolute”将需要滚动的内容和滚动条组件叠加在一起，“overflow: hidden”实现了内容的溢出隐藏效果。

3.滑块拖拽

接下来，我们需要实现滑块的拖拽。具体实现过程如下：

首先，在“scroll-slider”元素上绑定“mousedown”事件，表示鼠标按下时触发；

然后，在document上绑定“mousemove”事件和“mouseup”事件，表示鼠标移动和松开时触发；

在“mousemove”事件中，计算出滑块当前的位置并实现滚动的效果。

具体代码如下：

var scrollWrapper = document.querySelector('.scroll-wrapper');
var content = document.querySelector('.scroll-content');
var slider = document.querySelector('.scroll-slider');
var startY;

slider.addEventListener('mousedown', function(e) {
  startY = e.clientY; // 记录下鼠标按下时的位置
  document.addEventListener('mousemove', drag);
  document.addEventListener('mouseup', release);
});

function drag(e) {
  e.preventDefault(); // 阻止默认事件，避免文本被选中
  var diff = e.clientY - startY;
  var max = scrollWrapper.offsetHeight - slider.offsetHeight;
  var top = Math.min(Math.max(slider.offsetTop + diff, 0), max);
  var percent = top / max;
  content.style.top = -percent * (content.offsetHeight - scrollWrapper.offsetHeight) + 'px';
  slider.style.top = top + 'px';
}

function release() {
  document.removeEventListener('mousemove', drag);
  document.removeEventListener('mouseup', release);
}

通过以上代码，我们实现了滑块的拖拽功能，并且在滑动过程中对内容也进行了滚动。

4.箭头点击

除了拖拽滑块，我们也可以通过点击箭头来实现滚动。具体实现如下：

首先，在“scroll-bar”元素上绑定“click”事件，表示鼠标点击时触发；

然后，在事件回调函数中判断点击的是上箭头还是下箭头，并计算出需要滚动的距离；

最后，更新滑块的位置和内容的位置，实现滚动效果。

具体代码如下：

var scrollWrapper = document.querySelector('.scroll-wrapper');
var content = document.querySelector('.scroll-content');
var slider = document.querySelector('.scroll-slider');
var arrows = document.querySelectorAll('.scroll-bar > div');

scrollWrapper.addEventListener('click', function(e) {
  var rect = scrollWrapper.getBoundingClientRect();
  var percent, diff, top, max;

  if (e.target === arrows[0]) { // 上箭头
    percent = -0.1;
  } else if (e.target === arrows[1]) { // 下箭头
    percent = 0.1;
  } else {
    return;
  }

  diff = percent * scrollWrapper.offsetHeight;
  max = scrollWrapper.offsetHeight - slider.offsetHeight;
  top = Math.min(Math.max(slider.offsetTop + diff, 0), max);
  percent = top / max;
  content.style.top = -percent * (content.offsetHeight - scrollWrapper.offsetHeight) + 'px';
  slider.style.top = top + 'px';
});

通过以上代码，我们实现了点击箭头来滚动的功能。

5.水平滚动

除了垂直滚动，我们也可以实现水平滚动。具体实现过程如下：

首先，将“scroll-wrapper”和“scroll-content”样式中的“height”和“top”属性改为“width”和“left”属性；

然后，在“scroll-slider”元素上绑定“mousedown”事件和“mousemove”事件，实现水平拖拽；

最后，在箭头点击事件中也需要计算水平距离并实现相应的滚动。

具体代码如下：

var scrollWrapper = document.querySelector('.scroll-wrapper');
var content = document.querySelector('.scroll-content');
var slider = document.querySelector('.scroll-slider');
var arrows = document.querySelectorAll('.scroll-bar > div');
var startX;

slider.addEventListener('mousedown', function(e) {
  startX = e.clientX; // 记录下鼠标按下时的位置
  document.addEventListener('mousemove', drag);
  document.addEventListener('mouseup', release);
});

function drag(e) {
  e.preventDefault(); // 阻止默认事件，避免文本被选中
  var diff = e.clientX - startX;
  var max = scrollWrapper.offsetWidth - slider.offsetWidth;
  var left = Math.min(Math.max(slider.offsetLeft + diff, 0), max);
  var percent = left / max;
  content.style.left = -percent * (content.offsetWidth - scrollWrapper.offsetWidth) + 'px';
  slider.style.left = left + 'px';
}

scrollWrapper.addEventListener('click', function(e) {
  var rect = scrollWrapper.getBoundingClientRect();
  var percent, diff, left, max;

  if (e.target === arrows[0]) { // 左箭头
    percent = -0.1;
  } else if (e.target === arrows[1]) { // 右箭头
    percent = 0.1;
  } else {
    return;
  }

  diff = percent * scrollWrapper.offsetWidth;
  max = scrollWrapper.offsetWidth - slider.offsetWidth;
  left = Math.min(Math.max(slider.offsetLeft + diff, 0), max);
  percent = left / max;
  content.style.left = -percent * (content.offsetWidth - scrollWrapper.offsetWidth) + 'px';
  slider.style.left = left + 'px';
});

通过以上代码，我们实现了水平滚动条的功能。

6.示例

最后，我们提供两个示例来展示上述实现过程。第一个示例是一个基础版的垂直滚动条，你可以在其中进行自由拖拽和点击箭头滚动：

基础版垂直滚动条示例

第二个示例是一个水平和垂直均支持的滚动条，你可以在其中进行垂直和水平拖拽以及点击箭头进行对应方向的滚动：

水平与垂直滚动条示例