如何在scrollLeft达到指定阈值时禁止向左滚动且仍可向右滚动

首先明确滚动容器的核心属性：

• scrollWidth：滚动容器全部内容的实际宽度
• clientWidth：滚动容器的可视区域宽度
• 向左滚动的最大允许偏移量为 scrollWidth - clientWidth，当scrollLeft等于该值时，已经滚动到最左侧边界，无法继续向左滚动

可用实现方案 #

这里提供两种常用实现，你可以根据自己的场景选择：

方案1：scroll事件边界修正（兼容性最好，无滚动抖动） #

直接在滚动事件中修正超出边界的偏移值，不影响正常向右滚动逻辑：

// 替换为你自己的滚动容器选择器
const scrollEl = document.querySelector('.scroll-container')

scrollEl.addEventListener('scroll', (e) => {
  const maxScrollLeft = e.target.scrollWidth - e.target.clientWidth
  // 仅当向左滚动超出最大边界时修正位置
  if (e.target.scrollLeft > maxScrollLeft) {
    e.target.scrollLeft = maxScrollLeft
  }
})

方案2：滚动前事件拦截（适合需要提前禁止滚动的场景） #

监听滚轮/触摸滑动事件，在滚动触发前就拦截超出边界的操作：

const scrollEl = document.querySelector('.scroll-container')

// 处理PC端滚轮滚动
scrollEl.addEventListener('wheel', (e) => {
  const maxScrollLeft = scrollEl.scrollWidth - scrollEl.clientWidth
  // deltaX>0代表向左滚动，此时已经到边界就禁止滚动
  if (e.deltaX > 0 && scrollEl.scrollLeft >= maxScrollLeft) {
    e.preventDefault()
  }
}, { passive: false })

// 处理移动端触摸滑动
let startX = 0
scrollEl.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX
})
scrollEl.addEventListener('touchmove', (e) => {
  const moveX = e.touches[0].clientX - startX
  const maxScrollLeft = scrollEl.scrollWidth - scrollEl.clientWidth
  // moveX<0代表向左滑动，此时已经到边界就禁止滚动
  if (moveX < 0 && scrollEl.scrollLeft >= maxScrollLeft) {
    e.preventDefault()
  }
}, { passive: false })

现有代码优化建议 #

你当前代码中硬编码的400为固定阈值，建议替换为动态计算的maxScrollLeft，避免容器尺寸变化后逻辑失效：

const maxScrollLeft = event.target.scrollWidth - event.target.clientWidth
if (event.target.scrollLeft > maxScrollLeft) {
  event.target.scrollLeft = maxScrollLeft
}

注意：如果你的滚动容器有横向padding或border，需要根据实际盒模型调整maxScrollLeft的计算逻辑，避免边界计算偏差

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