React useScrollLock Hook：为弹窗锁定页面滚动（2026）
来源：dev.to — 2026-08-20
📋 概述
当弹窗打开、居中、一切完美时，用户轻轻拨动遮罩层，背后的页面就跟着滚动走了——这是几乎所有弹窗开发都会遇到的经典问题。很多人第一反应是用那「著名的三行代码」来处理，但作者指出这往往不够。本文提供了一个 useScrollLock 自定义 Hook 的正确实现方案。
🔑 核心要点
- 弹窗打开时锁定 body 滚动，是每个弹窗实现都要面对的经典痛点。
- 很多人第一反应用的「那三行代码」往往并不完备，存在失效或破坏滚动位置的隐患。
- useScrollLock 以 Hook 形式封装滚动锁定逻辑，便于在多个弹窗间复用。
💡 金句
你的弹窗开着、居中、完美。然后有人拨了一下遮罩层，它背后的页面就滑走了。
👍 0
👎 0
← 返回 dev.to 首页