下面是关于JavaScript自定义滚动条的实现攻略及示例说明。

一、背景介绍

在网页中，经常需要应用到滚动条，用以浏览超出当前可见区域的部分。但是浏览器的原生滚动条显示样式较为简单，不够美观；而且在不同浏览器上样式差异较大，不够统一。因此，很多网页都会采用自定义滚动条的方式，使其样式更加漂亮，且在不同浏览器上显示效果相似。

二、实现方法

下面介绍一种利用JavaScript实现自定义滚动条的基本方法：

1. 隐藏原生滚动条：在需要添加自定义滚动条的元素上设置overflow:hidden属性，并将滚动条的高度或宽度设为0，以隐藏原生滚动条。

.element {  overflow: hidden;  width: 200px;  height: 200px;}.element::-webkit-scrollbar {  width: 0;}

1. 添加自定义滚动条：在滚动条外层添加一个p，用来作为滚动条，并设置其样式。其中，滚动条高度或宽度要和原生滚动条对应。

<p class="element">  <p class="scrollbar"></p>  <!-- 内容区域 --></p>.scrollbar {  background-color: gray;  width: 8px;  height: 50px;  border-radius: 4px;}

1. **滚动事件：使用addEventListener方法**元素的scroll事件，并在事件处理函数中更新自定义滚动条的位置和高度或宽度。

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

1. **滚动条点击事件：给滚动条添加click事件**，用来调整内容区域的滚动位置。

scrollbar.addEventListener('click', function(event) {  const clickY = event.clientY;  const scrollbarTop = scrollbar.getBoundingClientRect().top + window.pageYOffset;  const elementTop = element.getBoundingClientRect().top + window.pageYOffset;  const scrollbarHeight = scrollbar.offsetHeight;  const elementHeight = element.offsetHeight;  const scrollbarRatio = (clickY - scrollbarTop) / scrollbarHeight;  const scrollTop = (scrollbarRatio * (elementHeight - elementHeight)) + elementTop;  element.scrollTo({    top: scrollTop,    behavior: 'smooth'  });});

三、示例说明

下面提供两个实际的JavaScript自定义滚动条的示例，帮助读者更好地理解上述实现方法。

示例一：竖向滚动条

以下代码实现了一个竖向的自定义滚动条。其中，元素高度为200px，内容区域高度为400px，滚动条高度为100px，拖动滚动条时内容区域会相应滚动。

<p class="element">  <p class="content">    <!-- 填充大量内容 -->  </p>  <p class="scrollbar"></p></p>.element {  overflow: hidden;  width: 200px;  height: 200px;  position: relative;}.content {  width: 100%;  height: 400px;  padding-right: 8px; /* 为滚动条留出位置 */  box-sizing: border-box;  overflow-y: scroll;}.scrollbar {  position: absolute;  top: 0;  right: 0;  width: 8px;  height: 100px;  border-radius: 4px;  background-color: gray;  cursor: pointer;}const element = document.querySelector('.element');const content = document.querySelector('.content');const scrollbar = document.querySelector('.scrollbar');element.addEventListener('scroll', function() {  const scrollTop = element.scrollTop;  const scrollHeight = element.scrollHeight;  const elementHeight = element.clientHeight;  const scrollbarHeight = elementHeight * elementHeight / scrollHeight;  const scrollbarTop = (scrollTop / (scrollHeight - elementHeight)) * (elementHeight - scrollbarHeight);  scrollbar.style.height = scrollbarHeight + 'px';  scrollbar.style.top = scrollbarTop + 'px';});scrollbar.addEventListener('click', function(event) {  const clickY = event.clientY;  const scrollbarTop = scrollbar.getBoundingClientRect().top + window.pageYOffset;  const elementTop = element.getBoundingClientRect().top + window.pageYOffset;  const scrollbarHeight = scrollbar.offsetHeight;  const elementHeight = element.offsetHeight;  const scrollbarRatio = (clickY - scrollbarTop) / scrollbarHeight;  const scrollTop = (scrollbarRatio * (elementHeight - elementHeight)) + elementTop;  element.scrollTo({    top: scrollTop,    behavior: 'smooth'  });});

示例二：横向滚动条

以下代码实现了一个横向的自定义滚动条。其中，元素宽度为500px，内容区域宽度为1000px，滚动条宽度为100px，拖动滚动条时内容区域会相应滚动。

<p class="element">  <p class="content">    <!-- 填充大量内容 -->  </p>  <p class="scrollbar"></p></p>.element {  overflow: hidden;  width: 500px;  height: 200px;  position: relative;}.content {  width: 1000px;  height: 100%;  padding-bottom: 8px; /* 为滚动条留出位置 */  box-sizing: border-box;  overflow-x: scroll;  white-space: nowrap;}.scrollbar {  position: absolute;  bottom: 0;  left: 0;  height: 8px;  width: 100px;  border-radius: 4px;  background-color: gray;  cursor: pointer;}const element = document.querySelector('.element');const content = document.querySelector('.content');const scrollbar = document.querySelector('.scrollbar');element.addEventListener('scroll', function() {  const scrollLeft = element.scrollLeft;  const scrollWidth = element.scrollWidth;  const elementWidth = element.clientWidth;  const scrollbarWidth = elementWidth * elementWidth / scrollWidth;  const scrollbarLeft = (scrollLeft / (scrollWidth - elementWidth)) * (elementWidth - scrollbarWidth);  scrollbar.style.width = scrollbarWidth + 'px';  scrollbar.style.left = scrollbarLeft + 'px';});scrollbar.addEventListener('click', function(event) {  const clickX = event.clientX;  const scrollbarLeft = scrollbar.getBoundingClientRect().left + window.pageXOffset;  const elementLeft = element.getBoundingClientRect().left + window.pageXOffset;  const scrollbarWidth = scrollbar.offsetWidth;  const elementWidth = element.offsetWidth;  const scrollbarRatio = (clickX - scrollbarLeft) / scrollbarWidth;  const scrollLeft = (scrollbarRatio * (elementWidth - elementWidth)) + elementLeft;  element.scrollTo({    left: scrollLeft,    behavior: 'smooth'  });});

除了以上示例，还可以通过修改样式和**事件等方法，实现更多种类的自定义滚动条。 interested_resident，希望这份攻略能对您有所帮助。