iOS Safari下scrollTop判断失效 滚动到顶显示向下箭头按钮如何适配

失效核心原因 #

• iOS Safari对scroll事件做了节流优化，惯性滚动过程中不会触发scroll事件，只有滚动完全停止后才会触发，导致判断逻辑未执行
• mousewheel是非标准事件，iOS Safari完全不支持该事件
• iOS滚动的弹性回弹效果会导致scrollTop出现负数或极小的浮点值，严格等于0的判断逻辑无法命中
• 未开启专属属性时，自定义滚动容器的事件触发逻辑存在异常

适配修改方案 #

• 1. 修正事件绑定与判断逻辑 #

  移除不兼容的mousewheel事件，替换为标准wheel事件，同时新增scrollend事件覆盖惯性滚动结束的场景，兼容低版本iOS可搭配防抖定时器，同时修正scrollTop的判断规则：

const scrollContainer = document.querySelector('你的可滚动div选择器')
const arrowBtn = document.querySelector('你的向下箭头按钮选择器')
let scrollTimer = null

// 统一显隐判断函数
function checkArrowVisible() {
  // 兼容弹性滚动的负数和浮点值问题
  if (Math.round(scrollContainer.scrollTop) <= 1) {
    arrowBtn.style.display = 'block'
  } else {
    arrowBtn.style.display = 'none'
  }
}

// 绑定多端兼容的事件
['scroll', 'wheel', 'touchmove', 'scrollend'].forEach(evt => {
  scrollContainer.addEventListener(evt, checkArrowVisible)
})

// 低版本iOS兼容：scroll事件加防抖，覆盖惯性滚动场景
scrollContainer.addEventListener('scroll', () => {
  clearTimeout(scrollTimer)
  scrollTimer = setTimeout(checkArrowVisible, 100)
})

• 2. 新增滚动容器CSS兼容属性 #

  给可滚动div添加如下CSS，确保iOS下滚动行为和事件触发正常：

.你的滚动容器类名 {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

• 3. 主动触发跳转后的状态更新 #

  点击箭头跳转到容器底部的逻辑中，主动调用一次显隐判断函数，避免跳转后事件未触发导致按钮状态错误：

arrowBtn.addEventListener('click', () => {
  // 滚动到底部
  scrollContainer.scrollTo({
    top: scrollContainer.scrollHeight - scrollContainer.clientHeight,
    behavior: 'smooth'
  })
  // 主动更新按钮状态
  checkArrowVisible()
})

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