如何用JS和HTML创建替换浏览器默认滚动条的水平滚动条

可以通过自定义DOM元素结合JavaScript监听滚动事件来实现这个需求，核心思路是：隐藏浏览器默认垂直滚动条，创建一个自定义水平滚动条，同步页面滚动位置与滚动条滑块的位置，同时支持拖动滑块控制页面滚动。

完整实现代码 #

HTML

<!-- 自定义水平滚动条容器 -->
<div class="custom-horizontal-scrollbar">
  <div class="scrollbar-thumb"></div>
</div>

<!-- 页面内容示例 -->
<div class="page-content">
  <!-- 这里放置你的页面内容，需足够长以触发滚动 -->
  <p>页面内容段落...</p>
  <!-- 重复足够多内容确保页面可滚动 -->
</div>

CSS

/* 隐藏浏览器默认垂直滚动条 */
body {
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
body::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
}

/* 自定义水平滚动条样式 */
.custom-horizontal-scrollbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: #eee;
  z-index: 9999;
}

.scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100%;
  background-color: #4285f4;
  border-radius: 4px;
  cursor: grab;
}
.scrollbar-thumb:active {
  cursor: grabbing;
}

/* 页面内容示例样式 */
.page-content {
  height: 2000px; /* 确保页面可滚动 */
  padding: 20px;
}

JavaScript

const scrollbarContainer = document.querySelector('.custom-horizontal-scrollbar');
const scrollbarThumb = document.querySelector('.scrollbar-thumb');
let isDragging = false;

// 同步页面滚动到滚动条位置
function syncScrollbar() {
  const totalScrollHeight = document.documentElement.scrollHeight - window.innerHeight;
  const scrollRatio = window.pageYOffset / totalScrollHeight;
  const thumbPosition = scrollRatio * (scrollbarContainer.offsetWidth - scrollbarThumb.offsetWidth);
  
  scrollbarThumb.style.left = `${thumbPosition}px`;
}

// 同步滚动条拖动到页面滚动
function syncPageScroll(thumbPosition) {
  const totalScrollRange = scrollbarContainer.offsetWidth - scrollbarThumb.offsetWidth;
  const scrollRatio = thumbPosition / totalScrollRange;
  const totalScrollHeight = document.documentElement.scrollHeight - window.innerHeight;
  
  window.scrollTo({
    top: scrollRatio * totalScrollHeight,
    behavior: 'instant'
  });
}

// 监听页面滚动事件
window.addEventListener('scroll', syncScrollbar);

// 滚动条拖动逻辑
scrollbarThumb.addEventListener('mousedown', (e) => {
  isDragging = true;
  const clickOffset = e.clientX - scrollbarThumb.getBoundingClientRect().left;
  
  const handleMouseMove = (e) => {
    if (!isDragging) return;
    let targetPosition = e.clientX - clickOffset - scrollbarContainer.getBoundingClientRect().left;
    targetPosition = Math.max(0, Math.min(targetPosition, scrollbarContainer.offsetWidth - scrollbarThumb.offsetWidth));
    
    syncPageScroll(targetPosition);
  };
  
  const handleMouseUp = () => {
    isDragging = false;
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
  };
  
  document.addEventListener('mousemove', handleMouseMove);
  document.addEventListener('mouseup', handleMouseUp);
});

// 点击滚动条容器跳转
scrollbarContainer.addEventListener('click', (e) => {
  if (e.target === scrollbarThumb) return;
  const clickPosition = e.clientX - scrollbarContainer.getBoundingClientRect().left;
  const thumbHalfWidth = scrollbarThumb.offsetWidth / 2;
  const targetPosition = clickPosition - thumbHalfWidth;
  
  syncPageScroll(Math.max(0, Math.min(targetPosition, scrollbarContainer.offsetWidth - scrollbarThumb.offsetWidth)));
});

// 初始化滚动条位置
syncScrollbar();

关键说明 #

• 隐藏默认滚动条：针对不同浏览器使用了专属CSS属性，确保默认垂直滚动条完全隐藏。
• 滚动同步逻辑：通过计算页面滚动比例，将其映射到水平滚动条滑块的位置；反之，拖动滑块时将滑块位置比例转换为页面滚动高度。
• 交互优化：支持拖动滑块、点击滚动条容器跳转，同时添加鼠标状态变化（grab/grabbing）提升用户体验。

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