写一个自定义滚动条的代码

这里提供一份基于 HTML、CSS 和 JavaScript 的自定义滚动条代码，可以用于美化网页中的滚动条。

HTML 代码：

<div class="scrollbar">
  <div class="track">
    <div class="thumb"></div>
  </div>
</div>

CSS 代码：

.scrollbar {
  width: 8px;
  background-color: #f5f5f5;
  overflow: auto;
  margin-right: 20px;
}
 
.scrollbar::-webkit-scrollbar {
  width: 8px;
  background-color: #f5f5f5;
}
 
.scrollbar::-webkit-scrollbar-thumb {
  background-color: #000000;
}
 
.track {
  position: relative;
  width: 100%;
  height: 100%;
}
 
.thumb {
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: #000000;
  border-radius: 8px;
}

JavaScript 代码：

var scrollbar = document.querySelector('.scrollbar');
var thumb = scrollbar.querySelector('.thumb');
 
scrollbar.addEventListener('scroll', function() {
  var percent = scrollbar.scrollTop / (scrollbar.scrollHeight - scrollbar.clientHeight);
  setThumbPosition(percent);
});
 
function setThumbPosition(percent) {
  var thumbPosition = percent * (scrollbar.clientHeight - thumb.clientHeight);
  thumb.style.top = thumbPosition + 'px';
}

这段代码中，使用了 CSS 的伪元素 `::-webkit-scrollbar` 和 `::-webkit-scrollbar-thumb` 来控制滚动条的样式，使用了 JavaScript 来监听滚动事件并更新滑块的位置。可以根据实际需求进行修改。