JQuery实现自定义滚动条

在网页中实现自定义滚动条通常涉及CSS和JavaScript的结合使用。以下是一个简单的jQuery实现自定义滚动条的例子：

HTML:

<div id="scrollable-content">
  <!-- 长内容，以至于需要滚动 -->
</div>
 
<div id="custom-scrollbar">
  <div id="scrollbar-thumb"></div>
</div>

CSS:

#scrollable-content {
  width: 200px;
  height: 100px;
  overflow: hidden;
  position: relative;
}
 
#custom-scrollbar {
  width: 20px;
  background-color: #f0f0f0;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: none; /* 默认隐藏滚动条 */
}
 
#scrollbar-thumb {
  width: 100%;
  height: 0;
  background-color: #d6d6d6;
  cursor: pointer;
  position: absolute;
  top: 0;
}
 
/* 鼠标悬停时显示滚动条 */
#scrollable-content:hover + #custom-scrollbar {
  display: block;
}

jQuery:

$(document).ready(function() {
  const $scrollableContent = $('#scrollable-content');
  const $customScrollbar = $('#custom-scrollbar');
  const $scrollbarThumb = $('#scrollbar-thumb');
 
  $scrollableContent.scroll(function() {
    // 计算滚动条可移动的高度范围
    const contentHeight = $scrollableContent.outerHeight();
    const viewportHeight = $scrollableContent.innerHeight();
    const scrollableHeight = contentHeight - viewportHeight;
    const scrollFactor = viewportHeight / contentHeight;
 
    // 计算当前滚动位置对应的滚动条高度
    const thumbHeight = scrollFactor * $customScrollbar.height();
    const scrollTop = $scrollableContent.scrollTop();
    const thumbTop = scrollTop / scrollableHeight * ($customScrollbar.height() - thumbHeight);
 
    // 设置滚动条高度和位置
    $scrollbarThumb.css({
      height: thumbHeight + 'px',
      top: thumbTop + 'px'
    });
  });
 
  $customScrollbar.click(function(e) {
    const top = e.pageY - $customScrollbar.offset().top;
    const scrollableHeight = $scrollableContent[0].scrollHeight - $scrollableContent.innerHeight();
    const scrollTop = top / $customScrollbar.height() * scrollableHeight;
 
    $scrollableContent.scrollTop(scrollTop);
  });
});

这段代码实现了一个简单的自定义滚动条，当鼠标悬停在可滚动区域上时显示自定义滚动条，并且可以通过点击自定义滚动条来滚动内容。滚动条的高度根据可滚动内容的高度和视口高度动态调整。点击滚动条时计算并设置内容的滚动位置。这只是一个基本的实现，可以根据具体需求进行扩展和优化。