详解如何用div实现自制滚动条

使用 div 实现自制滚动条是一种常见的前端技巧，可以帮助开发者实现更加灵活的滚动效果。本文将提供一些关于如何使用 div 实现自制滚动条的方法，包括使用 CSS 和 JavaScript 的示例说明。

使用 CSS

使用 CSS 实现自制滚动条的步骤如下：

1. 创建一个包含内容的 div 元素，并设置其 overflow 属性为 auto。
2. 创建一个滚动条的 div 元素，并设置其 position 属性为 absolute。
3. 设置滚动条的样式，包括宽度、高度、背景颜色等。
4. 使用 JavaScript 监听滚动条的滚动事件，并根据滚动条的位置来更新内容 div 的 scrollTop 属性。

下面是一个示例，演示如何使用 CSS 实现自制滚动条：

<div class="container">
  <div class="content">
    <p>这是一段文本</p>
    <p>这是一段文本</p>
    <p>这是一段文本</p>
    <p>这是一段文本</p>
    <p>这是一段文本</p>
    <p>这是一段文本</p>
    <p>这是一段文本</p>
    <p>这是一段文本</p>
    <p>这是一段文本</p>
    <p>这是一段文本</p>
  </div>
  <div class="scrollbar"></div>
</div>

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

.content {
  width: 100%;
  height: 100%;
}

.scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 10px;
  height: 100%;
  background-color: #ccc;
}

上述代码中，使用了 CSS 实现了自制滚动条。在 container 类中，设置了 position、width、height 和 overflow 属性，以便实现滚动条。在 scrollbar 类中，设置了 position、right、top、width、height 和 background-color 属性，以便实现滚动条的样式。

使用 JavaScript

使用 JavaScript 实现自制滚动条的步骤如下：

1. 创建一个包含内容的 div 元素，并设置其 overflow 属性为 hidden。
2. 创建一个滚动条的 div 元素，并设置其 position 属性为 absolute。
3. 设置滚动条的样式，包括宽度、高度、背景颜色等。
4. 使用 JavaScript 监听滚动条的滚动事件，并根据滚动条的位置来更新内容 div 的 scrollTop 属性。

下面是一个示例，演示如何使用 JavaScript 实现自制滚动条：

<div class="container">
  <div class="content">
    <p>这是一段文本</p>
    <p>这是一段文本</p>
    <p>这是一段文本</p>
    <p>这是一段文本</p>
    <p>这是一段文本</p>
    <p>这是一段文本</p>
    <p>这是一段文本</p>
    <p>这是一段文本</p>
    <p>这是一段文本</p>
    <p>这是一段文本</p>
  </div>
  <div class="scrollbar"></div>
</div>

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

.content {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

.scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 10px;
  height: 100%;
  background-color: #ccc;
}

const content = document.querySelector('.content');
const scrollbar = document.querySelector('.scrollbar');

scrollbar.addEventListener('mousedown', function(e) {
  const startY = e.clientY;
  const startScrollTop = content.scrollTop;

  function onMouseMove(e) {
    const deltaY = e.clientY - startY;
    const scrollHeight = content.scrollHeight;
    const clientHeight = content.clientHeight;
    const maxScrollTop = scrollHeight - clientHeight;
    const scrollTop = startScrollTop + deltaY / clientHeight * maxScrollTop;
    content.scrollTop = scrollTop;
  }

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

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

content.addEventListener('scroll', function() {
  const scrollHeight = content.scrollHeight;
  const clientHeight = content.clientHeight;
  const maxScrollTop = scrollHeight - clientHeight;
  const scrollTop = content.scrollTop;
  const scrollbarHeight = clientHeight / scrollHeight * clientHeight;
  const scrollbarTop = scrollTop / maxScrollTop * (clientHeight - scrollbarHeight);
  scrollbar.style.height = scrollbarHeight + 'px';
  scrollbar.style.top = scrollbarTop + 'px';
});

上述代码中，使用了 JavaScript 实现了自制滚动条。在 content 类中，设置了 overflow-y 属性，以便实现滚动条。在 scrollbar 类中，设置了 position、right、top、width、height 和 background-color 属性，以便实现滚动条的样式。在 JavaScript 中，使用了鼠标事件和滚动事件来监听滚动条的滚动，并根据滚动条的位置来更新内容 div 的 scrollTop 属性和滚动条的位置和高度。

示例说明

下面是两个示例说明，分别是使用 CSS 和 JavaScript 实现自制滚动条的示例。

示例一：使用 CSS

1. 创建一个包含内容的 div 元素，并设置其 overflow 属性为 auto。
2. 创建一个滚动条的 div 元素，并设置其 position 属性为 absolute。
3. 设置滚动条的样式，包括宽度、高度、背景颜色等。
4. 使用 JavaScript 监听滚动条的滚动事件，并根据滚动条的位置来更新内容 div 的 scrollTop 属性。

上述步骤中，使用了 CSS 实现了自制滚动条。

示例二：使用 JavaScript

1. 创建一个包含内容的 div 元素，并设置其 overflow 属性为 hidden。
2. 创建一个滚动条的 div 元素，并设置其 position 属性为 absolute。
3. 设置滚动条的样式，包括宽度、高度、背景颜色等。
4. 使用 JavaScript 监听滚动条的滚动事件，并根据滚动条的位置来更新内容 div 的 scrollTop 属性。

上述步骤中，使用了 JavaScript 实现了自制滚动条。