如何在隐藏滚动条的网页中实现横向拖拽滚动？

一、解决网页端拖拽滚动问题 #

你已经隐藏了滚动条，但网页端默认不支持鼠标拖拽滚动，通过JS配合CSS就能实现：

1. 补充CSS样式 #

给容器添加拖拽状态的光标样式，优化视觉反馈：

.wrapper {
  overflow-x: scroll;
  cursor: grab;
  /* 可选：添加平滑滚动效果 */
  scroll-behavior: smooth;
}

.wrapper.dragging {
  cursor: grabbing;
  user-select: none; /* 避免拖拽时误选内部文本 */
}

/* 隐藏横向滚动条 */
.wrapper::-webkit-scrollbar {
  height: 0;
}

2. JS实现拖拽逻辑 #

监听鼠标的按下、移动、松开事件，计算滚动距离：

const wrapper = document.querySelector('.wrapper');
let isDragging = false;
let startX;
let initialScrollLeft;

// 鼠标按下时记录初始状态
wrapper.addEventListener('mousedown', (e) => {
  isDragging = true;
  wrapper.classList.add('dragging');
  startX = e.pageX - wrapper.offsetLeft;
  initialScrollLeft = wrapper.scrollLeft;
});

// 鼠标移动时计算滚动量
wrapper.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  e.preventDefault(); // 阻止默认页面滚动行为
  const currentX = e.pageX - wrapper.offsetLeft;
  const scrollOffset = (currentX - startX) * 1.5; // 1.5为滚动速度系数，可按需调整
  wrapper.scrollLeft = initialScrollLeft - scrollOffset;
});

// 鼠标松开或离开容器时停止拖拽
['mouseup', 'mouseleave'].forEach(event => {
  wrapper.addEventListener(event, () => {
    isDragging = false;
    wrapper.classList.remove('dragging');
  });
});

二、横向滚动UI不止Netflix的导航箭头方案 #

完全不需要局限于导航箭头，还有多种适配不同场景的方案：

• 拖拽滚动：就是上面实现的方式，和移动端体验一致，适合用户自由浏览内容
• 键盘控制：监听左右方向键，触发容器横向滚动，适配键盘操作的用户

  wrapper.addEventListener('keydown', (e) => {
    const step = 300; // 每次滚动的距离，可调整
    if (e.key === 'ArrowLeft') wrapper.scrollBy({ left: -step, behavior: 'smooth' });
    if (e.key === 'ArrowRight') wrapper.scrollBy({ left: step, behavior: 'smooth' });
  });
  

• 鼠标滚轮横向滚动：把垂直滚轮事件转为横向滚动，适配习惯用滚轮的用户
• 滚动指示器：在容器底部添加进度条，直观显示当前滚动位置
• 自动滚动：鼠标hover时缓慢滚动，适合展示类内容

实际项目中可以组合多种方案，比如同时支持拖拽、键盘和导航箭头，覆盖不同用户的操作习惯。

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