js实现简易垂直滚动条

以下是“js实现简易垂直滚动条”的完整攻略：

1. 实现思路

实现一个简易的垂直滚动条，需要做到以下几点：

1. 根据内容的高度和容器的高度，计算出滚动条的高度，并渲染出来。
2. 监听滚动条的滚动事件，根据滚动条的位置，设置内容区域的滚动位置。

2. 实现步骤

2.1 创建HTML结构

首先，我们需要在HTML中创建好基本的结构。在容器里添加内容区域和滚动条区域两个子元素，如下所示：

<div class="container">
  <div class="content"></div>
  <div class="scroll-bar"></div>
</div>

2.2 添加样式

为了让页面好看一些，我们需要添加一些基本的样式，如下所示：

.container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.content {
  width: 200px; /* 与容器宽度相同 */
  height: 400px; /* 高度大于容器高度 */
}

.scroll-bar {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  background-color: gray;
}

2.3 计算滚动条的高度

接下来，我们需要使用JavaScript来计算滚动条的高度，并将其渲染到页面上。

var container = document.querySelector('.container');
var content = document.querySelector('.content');
var scrollBar = document.querySelector('.scroll-bar');
var scrollBarHeight = container.clientHeight / content.scrollHeight * container.clientHeight;
scrollBar.style.height = scrollBarHeight + 'px';

在上面的代码中，我们使用了clientHeight和scrollHeight属性来获取容器的高度和内容的高度，然后根据它们的比例来计算出滚动条的高度，并将其渲染到页面上。

2.4 监听滚动条的滚动事件

最后，我们需要实现监听滚动条的滚动事件，并根据滚动条的位置来设置内容区域的滚动位置。

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

  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);

  function onMouseMove(e) {
    var delta = e.clientY - startY;
    var scrollY = delta / container.clientHeight * content.scrollHeight;
    var newScrollBarTop = scrollBarTop + delta;

    if (newScrollBarTop < 0) {
      newScrollBarTop = 0;
    }

    if (newScrollBarTop + scrollBarHeight > container.clientHeight) {
      newScrollBarTop = container.clientHeight - scrollBarHeight;
    }

    scrollBar.style.top = newScrollBarTop + 'px';
    content.scrollTop = scrollY;
  }

  function onMouseUp() {
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  }
});

// 监听内容区域的滚动事件，更新滚动条的位置
content.addEventListener('scroll', function () {
  var scrollY = content.scrollTop;
  var scrollBarTop = scrollY / content.scrollHeight * container.clientHeight;
  scrollBar.style.top = scrollBarTop + 'px';
});

在上面的代码中，我们使用了mousedown、mousemove和mouseup事件来监听滚动条的拖拽事件，并根据拖拽的距离和容器的高度来计算出内容区域的滚动位置。同时，我们也监听了内容区域的滚动事件，以更新滚动条的位置。

示例1

以下是一个简单的示例：JSFiddle示例

示例2

以下是另一个带有滚动条样式的示例：JSFiddle示例