如何实现div滑块滚动到首尾项时为左右箭头添加CSS禁用提示样式

核心逻辑 #

实现滚动到滑块首尾时对应箭头显示禁用提示，只需在页面初始化、箭头点击、滑块滚动三个时机校验滑块滚动位置，匹配边界条件后给对应箭头增删禁用类即可：

• 抵达最左侧（首项）：滑块scrollLeft值为0，左箭头应用禁用样式
• 抵达最右侧（末项）：滑块scrollLeft值等于「滚动内容总宽度 - 滑块容器可视宽度」，右箭头应用禁用样式
• 未抵达对应边界时，移除箭头的禁用样式，恢复可交互状态

完整修改代码 #

1. 追加CSS禁用样式 #

在原有CSS代码末尾添加禁用态箭头样式，可根据设计需求调整透明度、颜色等提示效果：

/* 导航箭头禁用状态 */
#slide_wrapper > button.disabled {
  opacity: 0.3;
  cursor: not-allowed !important;
  pointer-events: none;
}

pointer-events: none会直接屏蔽禁用态元素的点击事件，无需额外在点击逻辑中写边界拦截判断，代码更简洁。

2. 替换原有JS逻辑 #

将原有JS代码替换为以下内容，新增箭头状态自动校验逻辑：

const buttonLeft = document.getElementById('slide_left')
const buttonRight = document.getElementById('slide_right')
const container = document.getElementById('slider')

// 箭头状态校验方法
const updateArrowStatus = () => {
  const maxScrollDistance = container.scrollWidth - container.clientWidth
  // 左边界判断，留1px容错避免滚动值小数精度导致判断失效
  buttonLeft.classList.toggle('disabled', container.scrollLeft <= 0)
  // 右边界判断
  buttonRight.classList.toggle('disabled', container.scrollLeft >= maxScrollDistance - 1)
}

// 左箭头滚动逻辑
buttonLeft.addEventListener('click', () => {
  container.scrollLeft -= 90
})

// 右箭头滚动逻辑
buttonRight.addEventListener('click', () => {
  container.scrollLeft += 90
})

// 监听滚动事件，实时更新箭头状态
container.addEventListener('scroll', updateArrowStatus)

// 初始化页面时执行一次，默认首屏位置左箭头为禁用态
updateArrowStatus()

3. HTML结构 #

原有HTML代码无需修改，可直接使用。

运行效果 #

• 页面初始加载时滑块停在最左侧，左箭头自动变为半透明不可点击状态
• 点击箭头滚动过程中，未抵达边界的箭头始终保持可点击状态
• 滚动到最右侧末项位置时，右箭头自动切换为半透明不可点击状态
• 反向滚动回到边界时，对应箭头会自动切换状态，无需额外手动处理

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