企业官网建设流程全解析

网站后台添加不了图片,外地公司做的网站能备案吗,电子商城平台网站建设,seo关键词排名优移动端弹窗“滚动穿透”的终极解决方案#xff1a;为什么 overflow: hidden 没用#xff1f;在移动端 H5 开发中#xff0c;“滚动穿透”#xff08;Scroll Chaining / Ghost Scroll#xff09;绝对是让无数前端开发者血压升高的经典 Bug 之一。什么是“滚动穿透”#x…移动端弹窗“滚动穿透”的终极解决方案为什么 overflow: hidden 没用在移动端 H5 开发中“滚动穿透”Scroll Chaining / Ghost Scroll绝对是让无数前端开发者血压升高的经典 Bug 之一。什么是“滚动穿透”场景很简单你打开了一个全屏弹窗Modal/Popup。弹窗下面有一层长列表背景。当你在弹窗上滑动手指时底下的背景页面竟然跟着一起滚动了这不仅体验极差还容易导致弹窗错位或用户迷失上下文。常见误区以为 CSS 就能搞定大多数人的第一反应是“这还不简单给 body 加个overflow: hidden不就行了”/* ❌ 只有 PC 端有效移动端经常翻车 */ body.modal-open { overflow: hidden; }为什么失效在 PC 端overflow: hidden确实能隐藏滚动条并禁止滚动。但在移动端特别是 iOS Safari浏览器认为body的滚动是“视口Viewport”级别的特性。即使你禁用了body的溢出用户手指在屏幕上拖拽Touch Events时浏览器依然会触发默认的滚动行为甚至引发橡皮筋效果。进阶方案阻止 touchmove有副作用第二种常见的方案是直接阻止弹窗遮罩层的触摸事件// ❌ 这种一刀切的方案会导致弹窗内部也无法滚动modal.addEventListener(touchmove, (e) { e.preventDefault(); }, { passive: false });局限性如果你的弹窗内部本身就需要滚动比如一个长长的语言选择列表这行代码会把弹窗内部的滚动也一并杀掉导致“死锁”。虽然可以通过判断target来优化但逻辑非常繁琐。终极解决方案Body 固定定位法Position Fixed目前业界包括 Ant Design Mobile, Vant 等主流组件库公认的最稳妥方案就是**“Body 固定定位法”**。核心原理既然禁止滚动失效那我们就从物理上切断滚动的可能。 当弹窗打开时我们将body设置为position: fixed。一个固定定位的元素天然就是死死钉在屏幕上的无论你怎么滑它都不可能动。带来的新问题页面跳顶单纯设置position: fixed会导致一个严重的副作用页面会瞬间跳回到顶部。因为脱离文档流后scrollTop丢失了。完整代码实现为了解决跳顶问题我们需要在“锁定”前记录当前的滚动位置并在“解锁”后恢复它。这正是我们项目Popup组件中那段 useEffect 代码的逻辑// React Hook 示例useEffect(() { if (visible) { // 1. 锁定记录位置并固定 Body const scrollTop window.scrollY || document.documentElement.scrollTop; document.body.style.position fixed; document.body.style.top -${scrollTop}px; // 把页面“拉”回原来的视觉位置 document.body.style.width 100%; // 存起来一会儿还要用 document.body.dataset.scrollY scrollTop.toString(); } else { // 2. 解锁恢复样式并滚动回去 const scrollTop parseInt(document.body.dataset.scrollY || 0, 10); document.body.style.position ; document.body.style.top ; document.body.style.width ; // 恢复滚动位置让用户无感知 window.scrollTo(0, scrollTop); } }, [visible]);代码解析document.body.style.position fixed这是核心强制禁止滚动。top -${scrollTop}px这是精髓。假设你滚到了 500px 的位置为了防止变为 fixed 后跳回 0px我们给 body 一个-500px的偏移量视觉上页面就纹丝不动了。window.scrollTo(0, scrollTop)关闭弹窗时解除 fixed此时页面真的回到了 0px我们必须立即用 JS 把它滚回到之前的 500px实现无缝衔接。总结虽然这段 JS 代码看起来有点“重”甚至操作了 DOM但它目前是解决移动端尤其是 iOS滚动穿透问题兼容性最好、副作用最小的方案。下次遇到弹窗滚动穿透别再纠结overflow: hidden了直接上“Body 固定定位法”吧