如何阻止Mac端Safari中overflow-y:hidden元素拖拽触发意外滚动

优先推荐CSS方案（无侵入无需JS） #

给.parent元素添加以下属性即可解决绝大多数场景的问题：

.parent {
  overscroll-behavior: none;
  -webkit-overscroll-behavior: none; /* 兼容低版本Safari */
}

该属性可以直接阻断浏览器默认的滚动链式传递行为，同时禁用Safari特有的弹性滚动溢出逻辑，不会影响元素的其他正常功能。
如果是拖拽触发的红色方块本身的默认拖拽行为导致的滚动，可以给方块额外添加属性：

.red-box {
  -webkit-user-drag: none;
  user-drag: none;
}

轻量JS方案（CSS不生效时使用） #

如果你的场景存在特殊样式限制无法修改父元素属性，可以用更轻量的事件拦截方案，比全局监听scroll事件重置scrollTop性能好很多：

const dragTrigger = document.querySelector('.red-box') // 替换为你的拖拽触发元素选择器
const preventMove = (e) => e.preventDefault()

// 按下时绑定移动事件拦截
dragTrigger.addEventListener('mousedown', () => {
  window.addEventListener('mousemove', preventMove, { passive: false })
})

// 抬起时移除监听，不影响页面其他交互
window.addEventListener('mouseup', () => {
  window.removeEventListener('mousemove', preventMove)
})

注意必须加passive: false配置，否则Safari会默认忽略事件中的preventDefault调用。

问题原因说明 #

这是Mac端Safari的已知行为差异：即便父元素设置了overflow-y: hidden，当用户拖拽内部元素时，Safari依然会触发默认的滚动逻辑，试图展示容器内的溢出内容，其他浏览器默认会遵循overflow属性的限制不会触发该行为。

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