如何实现Div仅向右滚动？优化向左滚动禁用后的卡顿问题

为什么之前的方案会卡顿？ #

你之前用scroll事件修正scrollLeft的思路，本质是先允许滚动发生，再强制回滚——这种"先做后改"的逻辑会让浏览器频繁触发重绘和布局计算，自然就出现了卡顿感。要解决问题，得在滚动行为发生之前就拦截掉向左的操作，而不是事后补救。

优化方案：提前拦截滚动输入事件 #

下面提供覆盖鼠标滚轮、触摸滑动的流畅解决方案，兼顾桌面和移动端场景：

1. 处理鼠标滚轮事件 #

监听wheel事件，直接判断滚轮方向，拦截向左的滚动操作：

const parent = document.getElementById('parent');

parent.addEventListener('wheel', function(e) {
  // 判断向左滚动：deltaX<0是横向左滚，部分浏览器纵向滚轮下deltaY>0也对应左滚逻辑
  const isScrollingLeft = e.deltaX < 0 || (e.deltaY > 0 && e.deltaX === 0);
  
  // 只有当scrollLeft>0时才拦截左滚（避免锁死初始位置无法向右滚动）
  if (isScrollingLeft && this.scrollLeft > 0) {
    e.preventDefault();
  }
});

2. 处理触摸滑动事件 #

针对移动端触摸操作，记录初始触摸位置，计算滑动方向后拦截向左滑动：

let touchStartX = 0;
const parent = document.getElementById('parent');

parent.addEventListener('touchstart', function(e) {
  touchStartX = e.touches[0].clientX;
});

parent.addEventListener('touchmove', function(e) {
  const touchCurrentX = e.touches[0].clientX;
  const diffX = touchStartX - touchCurrentX;
  
  // diffX<0表示手指向右滑（对应div向左滚，需要拦截）
  if (diffX < 0 && this.scrollLeft > 0) {
    e.preventDefault();
  }
  
  // 更新初始位置，保证滑动过程中持续判断方向
  touchStartX = touchCurrentX;
});

3. 适配jQuery的版本（如果你习惯用jQuery） #

如果你更倾向于用jQuery实现，下面是兼容后的流畅版本：

let touchStartX = 0;
const $parent = $("#parent");

// 处理鼠标滚轮
$parent.on('wheel', function(e) {
  const event = e.originalEvent;
  const isScrollingLeft = event.deltaX < 0 || (event.deltaY > 0 && event.deltaX === 0);
  
  if (isScrollingLeft && $(this).scrollLeft() > 0) {
    e.preventDefault();
  }
});

// 处理触摸滑动
$parent.on('touchstart', function(e) {
  touchStartX = e.originalEvent.touches[0].clientX;
});

$parent.on('touchmove', function(e) {
  const touchCurrentX = e.originalEvent.touches[0].clientX;
  const diffX = touchStartX - touchCurrentX;
  
  if (diffX < 0 && $(this).scrollLeft() > 0) {
    e.preventDefault();
  }
  
  touchStartX = touchCurrentX;
});

额外补充：支持键盘方向键拦截 #

如果需要拦截键盘左箭头的向左滚动，可以添加keydown事件监听：

parent.addEventListener('keydown', function(e) {
  if (e.key === 'ArrowLeft' && this.scrollLeft > 0) {
    e.preventDefault();
  }
});

基础样式提醒 #

确保你的div已经配置了正确的滚动基础样式，比如横向滚动需要：

#parent {
  overflow-x: auto;
  white-space: nowrap;
  /* 可选：隐藏滚动条，优化视觉体验 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#parent::-webkit-scrollbar {
  display: none;
}

这样处理后，向左的滚动操作会被直接拦截，不会触发浏览器的滚动行为，自然就消除了卡顿问题。

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