原生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';
});

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