基于滚动的元素显隐功能在iOS及MacBook上失效问题排查

• 滚动事件的浏览器行为差异
  Windows端浏览器（如Chrome）的滚动事件触发逻辑更贴近鼠标的步进式滚动，而Mac/iOS上的Safari对触控板/触摸滚动做了特殊处理：不仅有滚动节流，还会把视觉滚动和JS事件处理分线程执行。当你在scroll事件里动态修改.year-slider-container的top值时，会和Safari的视觉渲染不同步，导致位置计算偏差，出现跳动。

• 惯性滚动的未处理逻辑
  Mac触控板和iPhone的滚动自带惯性效果，滚动操作结束后页面还会继续滚动一段时间。如果你的代码只在scroll事件触发时更新元素位置，没有处理滚动结束后的最终状态，就会让元素在惯性滚动阶段的位置更新出错，最终可能移出屏幕。

• CSS单位的计算精度问题
  你用5rem作为显示时的top值，rem依赖根元素字体大小计算。Safari在动态修改样式时，对rem的计算精度或时机和Chrome有差异，可能导致实际渲染的位置和预期不符。可以临时换成80px（假设根字体16px，5rem=80px）测试，看是否还会出现跳动。

• 频繁布局重排的性能瓶颈
  每次滚动修改top属性都会触发浏览器的布局重排，在iOS设备或滚动频繁时，主线程可能来不及及时处理渲染请求，导致视觉上的延迟和跳动。Windows设备性能或浏览器渲染优化更好，所以没暴露这个问题。

• 触摸事件的冲突干扰
  移动端滚动除了scroll事件，还会触发touchstart、touchmove等触摸事件。如果你的代码没有处理这些事件的默认行为（比如阻止不必要的默认滚动行为），可能会和元素的位置更新逻辑冲突，导致异常。

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