JS自定义滚动条效果简单实现代码

这里为大家详细讲解一下JS自定义滚动条效果的实现。下面将分为以下几个步骤：

准备HTML结构

<div class="content-wrap">
  <div class="content">
    <!--此处为内容区域-->
  </div>
</div>

其中，.content-wrap为滚动条的父级容器，.content为需要滚动的内容。

添加样式

通过CSS来完成滚动条的样式，具体代码如下：

/*容器样式*/
.content-wrap {
  position: relative;
  height: 300px;
  overflow: hidden;
}
/*内容样式*/
.content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
/*滚动条轨道*/
.scrollbar-track {
  position: absolute;
  right: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background-color: #f2f2f2;
  border-radius: 2.5px;
}
/*滚动条滑块*/
.scrollbar-thumb {
  position: absolute;
  right: 0;
  top: 0;
  width: 5px;
  height: 50px;
  background-color: #333;
  border-radius: 3px;
  cursor: pointer;
}

这里为滚动条添加了两个元素，.scrollbar-track为轨道，.scrollbar-thumb为滑块。

编写JS代码

首先需要通过JS获取到滑块和轨道元素，然后监听滑块的拖拽事件，实现滑块的位置和内容区域的滚动。具体代码如下：

//获取元素
var wrap = document.querySelector('.content-wrap');
var content = document.querySelector('.content');
var track = document.createElement('div');
var thumb = document.createElement('div');
track.className = 'scrollbar-track';
thumb.className = 'scrollbar-thumb';
track.appendChild(thumb);
wrap.appendChild(track);

//拖拽事件
var startY, startTop, moveY, endY;
thumb.addEventListener('mousedown', function (e) {
  startY = e.clientY;
  startTop = parseInt(getComputedStyle(thumb).top);
  document.addEventListener('mousemove', move);
  document.addEventListener('mouseup', end);
  e.stopPropagation();
  e.preventDefault();
}, false);

function move(e) {
  moveY = e.clientY;
  var offsetY = moveY - startY;
  var top = startTop + offsetY;
  if (top < 0) {
    top = 0;
  } else if (top > track.offsetHeight - thumb.offsetHeight) {
    top = track.offsetHeight - thumb.offsetHeight;
  }
  var contentTop = top / (track.offsetHeight - thumb.offsetHeight) * (content.offsetHeight - wrap.offsetHeight);
  content.style.top = -contentTop + 'px';
  thumb.style.top = top + 'px';
}

function end() {
  document.removeEventListener('mousemove', move);
  document.removeEventListener('mouseup', end);
}

代码中，首先创建了轨道和滑块的DOM节点，并将它们添加至滚动条父容器中。然后监听了滑块的mousedown事件，处理滑块的拖拽过程与滑块的位置，同时根据滑块的位置来滚动内容区域。在拖拽过程中监听了鼠标的mousemove和mouseup事件，并移除了这些事件的监听，防止冲突。

实例说明

以下为两个示例，一个为垂直方向的滚动条，一个为水平方向的滚动条，供大家参考：

（1）垂直方向的滚动条

<style>
  .content-wrap {
    position: relative;
    height: 300px;
    overflow: hidden;
  }
  .content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  .scrollbar-track {
    position: absolute;
    right: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background-color: #f2f2f2;
    border-radius: 2.5px;
  }
  .scrollbar-thumb {
    position: absolute;
    right: 0;
    top: 0;
    width: 5px;
    height: 50px;
    background-color: #333;
    border-radius: 3px;
    cursor: pointer;
  }
</style>
<div class="content-wrap">
  <div class="content">
    <p>这是一段很长的文本。</p>
    <p>这是一段很长的文本。</p>
    <p>这是一段很长的文本。</p>
    <p>这是一段很长的文本。</p>
    <p>这是一段很长的文本。</p>
    <p>这是一段很长的文本。</p>
    <p>这是一段很长的文本。</p>
    <p>这是一段很长的文本。</p>
  </div>
</div>
<script>
  var wrap = document.querySelector('.content-wrap');
  var content = document.querySelector('.content');
  var track = document.createElement('div');
  var thumb = document.createElement('div');
  track.className = 'scrollbar-track';
  thumb.className = 'scrollbar-thumb';
  track.appendChild(thumb);
  wrap.appendChild(track);

  var startY, startTop, moveY, endY;
  thumb.addEventListener('mousedown', function (e) {
    startY = e.clientY;
    startTop = parseInt(getComputedStyle(thumb).top);
    document.addEventListener('mousemove', move);
    document.addEventListener('mouseup', end);
    e.stopPropagation();
    e.preventDefault();
  }, false);

  function move(e) {
    moveY = e.clientY;
    var offsetY = moveY - startY;
    var top = startTop + offsetY;
    if (top < 0) {
      top = 0;
    } else if (top > track.offsetHeight - thumb.offsetHeight) {
      top = track.offsetHeight - thumb.offsetHeight;
    }
    var contentTop = top / (track.offsetHeight - thumb.offsetHeight) * (content.offsetHeight - wrap.offsetHeight);
    content.style.top = -contentTop + 'px';
    thumb.style.top = top + 'px';
  }

  function end() {
    document.removeEventListener('mousemove', move);
    document.removeEventListener('mouseup', end);
  }
</script>

（2）水平方向的滚动条

<style>
  .content-wrap {
    position: relative;
    width: 500px;
    height: 100px;
    overflow: hidden;
  }
  .content {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    white-space: nowrap;
  }
  .scrollbar-track {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #f2f2f2;
    border-radius: 2.5px;
  }
  .scrollbar-thumb {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 5px;
    background-color: #333;
    border-radius: 3px;
    cursor: pointer;
  }
</style>
<div class="content-wrap">
  <div class="content">
    <span>水平</span>
    <span>方向</span>
    <span>滚动</span>
    <span>条的</span>
    <span>实现</span>
    <span>代码</span>
    <span>示例</span>
  </div>
</div>
<script>
  var wrap = document.querySelector('.content-wrap');
  var content = document.querySelector('.content');
  var track = document.createElement('div');
  var thumb = document.createElement('div');
  track.className = 'scrollbar-track';
  thumb.className = 'scrollbar-thumb';
  track.appendChild(thumb);
  wrap.appendChild(track);

  var startX, startLeft, moveX, endX;
  thumb.addEventListener('mousedown', function (e) {
    startX = e.clientX;
    startLeft = parseInt(getComputedStyle(thumb).left);
    document.addEventListener('mousemove', move);
    document.addEventListener('mouseup', end);
    e.stopPropagation();
    e.preventDefault();
  }, false);

  function move(e) {
    moveX = e.clientX;
    var offsetX = moveX - startX;
    var left = startLeft + offsetX;
    if (left < 0) {
      left = 0;
    } else if (left > track.offsetWidth - thumb.offsetWidth) {
      left = track.offsetWidth - thumb.offsetWidth;
    }
    var contentLeft = left / (track.offsetWidth - thumb.offsetWidth) * (content.offsetWidth - wrap.offsetWidth);
    content.style.left = -contentLeft + 'px';
    thumb.style.left = left + 'px';
  }

  function end() {
    document.removeEventListener('mousemove', move);
    document.removeEventListener('mouseup', end);
  }
</script>

希望这篇攻略能够帮助到大家实现JS自定义滚动条效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS自定义滚动条效果简单实现代码 - Python技术站

JS自定义滚动条效果简单实现代码

相关文章