如何点击滚动条轨道时阻止滚动？保留拖动滑块滚动功能

完全可以实现这个需求，核心思路是通过监听鼠标按下事件，判断点击的是滚动条滑块还是轨道，对轨道的点击行为阻止默认滚动操作。

具体实现步骤（以WebKit浏览器为例，需适配不同浏览器） #

1. HTML结构：先准备一个带滚动的容器

<div class="scroll-container">
  <!-- 填充足够多的测试内容，让容器出现滚动条 -->
  <p>测试内容行1</p>
  <p>测试内容行2</p>
  <p>测试内容行3</p>
  <!-- 重复几十行内容... -->
</div>

2. 自定义滚动条样式（可选，方便识别区域）

.scroll-container {
  width: 300px;
  height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
}

/* WebKit浏览器滚动条自定义 */
.scroll-container::-webkit-scrollbar {
  width: 12px;
}
.scroll-container::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}
.scroll-container::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 6px;
}

3. JavaScript逻辑处理

const scrollBox = document.querySelector('.scroll-container');

scrollBox.addEventListener('mousedown', (e) => {
  // 先判断点击位置是否在滚动条区域内
  const containerRect = scrollBox.getBoundingClientRect();
  const scrollbarWidth = scrollBox.offsetWidth - scrollBox.clientWidth;
  const isInScrollbar = e.clientX > containerRect.right - scrollbarWidth;

  if (isInScrollbar) {
    // 计算滚动条滑块的位置和高度，判断点击是否在滑块上
    const scrollRatio = scrollBox.clientHeight / scrollBox.scrollHeight;
    const thumbHeight = scrollRatio * scrollBox.clientHeight;
    const thumbTop = containerRect.top + (scrollBox.scrollTop * scrollRatio);

    const isClickOnThumb = e.clientY >= thumbTop && e.clientY <= thumbTop + thumbHeight;

    // 如果不是点击滑块，阻止默认滚动行为
    if (!isClickOnThumb) {
      e.preventDefault();
    }
  }
});

注意事项 #

• 不同浏览器的滚动条实现差异较大，WebKit（Chrome、Edge）和Firefox、IE的滚动条DOM结构不同，上面的代码主要适配WebKit系浏览器，Firefox需要额外通过scrollbar-track相关伪元素或事件对象的originalTarget属性做兼容。
• 如果需要更省心的跨浏览器兼容，也可以使用第三方滚动条插件（如PerfectScrollbar），这类插件提供了更精细的事件回调，能直接区分滑块和轨道的交互。

内容的提问来源于stack exchange，提问作者Wellwoah