JavaScript CSS 通用循环滚动条

我来详细讲解一下如何实现“JavaScript CSS 通用循环滚动条”的完整攻略。

我来详细讲解一下如何实现“JavaScript CSS 通用循环滚动条”的完整攻略。

首先，我们需要明确一下实现过程的步骤：

1. HTML 结构
2. CSS 样式
3. JavaScript 实现滚动效果

接下来我们一步一步来实现。

HTML 结构

先看一下网页结构，我们需要在 HTML 中添加一个容器（外框）和一个实现内容滚动效果的滚动条。

容器（外框）的结构如下：

<div class="scroll-wrapper">
  <div class="scroll-content">
    <!-- 此处为需要滚动的内容，根据实际情况修改 -->
  </div>
  <div class="scroll-bar">
    <div class="scroll-handle"></div>
  </div>
</div>

其中，.scroll-wrapper 为容器（外框）的类名，.scroll-content 为需要滚动的内容的类名，.scroll-bar 为纵向滚动条的类名，.scroll-handle 为滚动条的滑块的类名。

CSS 样式

接下来我们需要添加 CSS 样式来实现滚动条的样式。

.scroll-wrapper {
  position: relative;
  overflow: hidden;
  /* 滚动条宽度和高度可以根据实际需求来设置 */
  width: 200px;
  height: 200px;
}
.scroll-content {
  /* 滚动内容超出容器范围后隐藏 */
  overflow: hidden;
  /* 滚动内容需要有足够的高度，才能出现滚动条 */
  height: 300px;
}
.scroll-bar {
  /* 滚动条定位 */
  position: absolute;
  right: 0;
  top: 0;
  /* 滚动条宽度和高度可以根据实际需求来设置 */
  width: 6px;
  height: 100%;
  /* 滚动条背景色 */
  background-color: #ddd;
}
.scroll-handle {
  /* 滚动条滑块定位 */
  position: absolute;
  left: 0;
  top: 0;
  /* 滚动条滑块宽度和高度可以根据实际需求来设置 */
  width: 6px;
  height: 50px;
  /* 滚动条滑块颜色和鼠标悬停后的颜色 */
  background-color: #666;
  /* 鼠标悬停后的滑块颜色 */
  /* background-color: #555; */
  /* 滑块圆角 */
  border-radius: 5px;
  /* 滑块阴影 */
  box-shadow: 0 0 5px #aaa;
}

JavaScript 实现滚动效果

最后我们需要使用 JavaScript 实现滚动条的功能。

var scrollWrapper = document.querySelector('.scroll-wrapper');
var scrollContent = document.querySelector('.scroll-content');
var scrollBar = document.querySelector('.scroll-bar');
var scrollHandle = document.querySelector('.scroll-handle');

var maxScrollTop = scrollContent.scrollHeight - scrollWrapper.offsetHeight;
var barHeight = scrollWrapper.offsetHeight / scrollContent.scrollHeight * scrollWrapper.offsetHeight;
scrollHandle.style.height = barHeight + 'px';

function scrollHandleMove(e) {
  var scrollTop = scrollContent.scrollTop;
  var handleTop = e.clientY - scrollWrapper.getBoundingClientRect().top - scrollHandle.offsetHeight / 2;
  handleTop = Math.max(handleTop, 0);
  handleTop = Math.min(handleTop, scrollBar.offsetHeight - scrollHandle.offsetHeight);
  var contentTop = handleTop / (scrollBar.offsetHeight - scrollHandle.offsetHeight) * maxScrollTop;
  scrollContent.scrollTop = contentTop;
  scrollHandle.style.top = handleTop + 'px';
}

scrollHandle.addEventListener('mousedown', function(e) {
  e.preventDefault();
  document.addEventListener('mousemove', scrollHandleMove);
  document.addEventListener('mouseup', function() {
    document.removeEventListener('mousemove', scrollHandleMove);
  });
});

以上就是实现“JavaScript CSS 通用循环滚动条”的完整攻略。

示例：

对以上代码进行修改，实现横向滚动条的示例：

.scroll-wrapper {
  position: relative;
  overflow: hidden;
  /* 滚动条宽度和高度可以根据实际需求来设置 */
  width: 300px;
  height: 100px;
}
.scroll-content {
  /* 横向滚动需要有足够的宽度，才能出现滚动条 */
  white-space: nowrap;
  /* 横向滚动的内容，需要在内部再添加一个 div 来包裹 */
  /* 此处为需要滚动的内容，根据实际情况修改 */
  width: 800px;
}
.scroll-bar {
  /* 滚动条定位 */
  position: absolute;
  bottom: 0;
  left: 0;
  /* 滚动条宽度和高度可以根据实际需求来设置 */
  width: 100%;
  height: 6px;
  /* 滚动条背景色 */
  background-color: #ddd;
}
.scroll-handle {
  /* 滚动条滑块定位 */
  position: absolute;
  left: 0;
  top: 0;
  /* 滚动条滑块宽度和高度可以根据实际需求来设置 */
  width: 50px;
  height: 6px;
  /* 滚动条滑块颜色和鼠标悬停后的颜色 */
  background-color: #666;
  /* 鼠标悬停后的滑块颜色 */
  /* background-color: #555; */
  /* 滑块圆角 */
  border-radius: 5px;
  /* 滑块阴影 */
  box-shadow: 0 0 5px #aaa;
}

var scrollWrapper = document.querySelector('.scroll-wrapper');
var scrollContent = document.querySelector('.scroll-content');
var scrollBar = document.querySelector('.scroll-bar');
var scrollHandle = document.querySelector('.scroll-handle');

var maxScrollLeft = scrollContent.scrollWidth - scrollWrapper.offsetWidth;
var barWidth = scrollWrapper.offsetWidth / scrollContent.scrollWidth * scrollWrapper.offsetWidth;
scrollHandle.style.width = barWidth + 'px';

function scrollHandleMove(e) {
  var scrollLeft = scrollContent.scrollLeft;
  var handleLeft = e.clientX - scrollWrapper.getBoundingClientRect().left - scrollHandle.offsetWidth / 2;
  handleLeft = Math.max(handleLeft, 0);
  handleLeft = Math.min(handleLeft, scrollBar.offsetWidth - scrollHandle.offsetWidth);
  var contentLeft = handleLeft / (scrollBar.offsetWidth - scrollHandle.offsetWidth) * maxScrollLeft;
  scrollContent.scrollLeft = contentLeft;
  scrollHandle.style.left = handleLeft + 'px';
}

scrollHandle.addEventListener('mousedown', function(e) {
  e.preventDefault();
  document.addEventListener('mousemove', scrollHandleMove);
  document.addEventListener('mouseup', function() {
    document.removeEventListener('mousemove', scrollHandleMove);
  });
});

以上就是实现横向滚动条的示例。