北京住房和建设部网站怎样查找自己建设的网站

北京住房和建设部网站,怎样查找自己建设的网站,免费推广网站排名,产品外包装设计弹窗遮罩不滚动背景#xff1f;前端开发者必学的实战技巧#xff08;附完整方案#xff09;弹窗遮罩不滚动背景#xff1f;前端开发者必学的实战技巧#xff08;附完整方案#xff09;当弹窗遇上滚动#xff0c;页面“抖”得你心慌弹出遮罩与背景滚动冲突的底层原理主流…弹窗遮罩不滚动背景前端开发者必学的实战技巧附完整方案弹窗遮罩不滚动背景前端开发者必学的实战技巧附完整方案当弹窗遇上滚动页面“抖”得你心慌弹出遮罩与背景滚动冲突的底层原理主流方案 3 连击CSS、JS、CSSJS纯 CSS 的“一分钟”方案看上去很美JS 动态冻结把滚动条装进冰箱1. 最简实现面向过程版2. React 自定义 Hook函数组件版3. Vue3 自定义指令组合式 API移动端“坑王”iOS 橡皮筋 安卓键盘1. iOS 弹性滚动bounce2. 安卓键盘弹起导致 window.innerHeight 变化可访问性别让键盘用户“迷路”混合终极方案CSS 占位 JS 焦点 内部滚动补丁调试锦囊快速定位“翻车”现场开发小妙招让遮罩层更“聪明”结语别让 bug 躲在滚动条后面偷笑弹窗遮罩不滚动背景前端开发者必学的实战技巧附完整方案“哥弹窗一开后面的页面还能上下滑产品经理刚才又拍桌子了。”“别急今天咱们就把滚动条这只调皮鬼按在地上摩擦。”当弹窗遇上滚动页面“抖”得你心慌先讲个真事。去年双十一公司活动页上线前 2 小时测试同学在群里甩了个录屏iPhone 上点击“领取优惠券”弹窗背景列表疯狂弹性滚动像蹦迪。更尴尬的是弹窗里也有滚动区结果手指一滑两层一起动用户直接懵圈。老板当场发话——“这体验要是上线年终奖你们自己掏”。那一刻我深刻体会到“锁不住滚动条就锁不住产品经理的怒火。”其实问题本质一句话浏览器默认不会帮你把 body 滚动冻住它只认“谁能滚”而非“谁不能滚”。所以我们的工作就是“欺骗”浏览器——让 viewport 以为“这里没东西可滚”同时又不让用户发现我们在作弊。弹出遮罩与背景滚动冲突的底层原理先给滚动冲突做个“解剖”。页面结构html → 视口viewport └── body → 文档流高度可能超出视口当 body 高度 100vh浏览器就会在 viewport 右侧生成系统滚动条。此时你拉起一个position:fixed的遮罩浏览器说“遮罩你随意body 我照滚。”滚动事件冒泡移动端 touch 事件不会自动阻止冒泡到 body如果你的弹窗内部也滚动到底后继续滑就会“溢出”到 body出现「链式滚动」——俗称“橡皮筋”。滚动条宽度消失导致的“跳动”很多方案直接给 body 加overflow:hidden滚动条瞬间被拔掉页面宽度瞬间增加 15pxChrome 默认整个布局会“抖”一下在暗黑模式 宽屏下尤其明显。iOS 的“区别对待”iOS Safari 对body和documentElement的滚动耦合做了特殊优化body的overflow:hidden可能无效必须加给documentElement键盘弹起时visualViewport会变化如果此时你把top写死页面会被键盘顶飞。一句话总结“冲突”不是浏览器 bug而是我们把“谁该滚”这件事想得太简单。主流方案 3 连击CSS、JS、CSSJS先把所有能想到的办法摆出来再逐个拆坑。方案关键词兼容性跳动内部滚动推荐指数A. 纯 CSSoverflow:hidden一行代码iOS 需双节点有需要额外处理⭐⭐B. JS 记录scrollTopposition:fixed手动还原全无灵活⭐⭐⭐⭐C.scrollbar-gutter:stable未来战士仅 Chromium无不影响⭐⭐D. 混合打法CSS 占位 JS 焦点管理生产首选全无完美⭐⭐⭐⭐⭐下面把每种打法揉碎顺便送上“能直接粘贴到项目”的源码包。纯 CSS 的“一分钟”方案看上去很美核心代码body.modal-open{overflow:hidden;}JS 侧functiontoggleModal(show){document.body.classList.toggle(modal-open,show);}优点真·一把梭写完早下班。缺点滚动条消失导致布局抖动。iOS 上经常失灵——必须连html一起锁html.modal-open, body.modal-open{overflow:hidden;height:100%;}如果弹窗内部还有滚动区手指滑到顶/底后继续拖body 依然会被带跑链式滚动。键盘弹出时iOS 会把fixed元素顶到宇宙去详见后文。“抖动”修复补丁body.modal-open{overflow:hidden;/* 1. 提前占好滚动条宽度防止回流 */padding-right:var(--scrollbar-width,0);}// 2. 动态计算滚动条宽度constscrollbarWidthwindow.innerWidth-document.documentElement.clientWidth;document.body.style.setProperty(--scrollbar-width,${scrollbarWidth}px);链式滚动补丁/* 弹窗内部滚动区 */.dialog-scroll{overscroll-behavior:contain;}overscroll-behavior是 Chrome 63 / Firefox 59 的支持属性可以阻断“边缘溢出滚动”。但 iOS Safari 要 16 才支持老机型只能干瞪眼。小结纯 CSS 方案适合“内部无滚动 无兼容要求”的后台系统面向 C 端或者移动端请直接看下一节。JS 动态冻结把滚动条装进冰箱思路一句话“把 body 变成 fixed滚多少我帮你记着关闭时再原样塞回去。”1. 最简实现面向过程版letscrollTop0;functionlock(){scrollTopwindow.pageYOffset||document.documentElement.scrollTop;document.body.style.positionfixed;document.body.style.top-${scrollTop}px;document.body.style.left0;document.body.style.right0;}functionunlock(){document.body.style.position;document.body.style.top;window.scrollTo(0,scrollTop);}优点绝对无抖动因为 body 宽度没变滚动条还在只是被我“固定”了。内部滚动区随便滑body 纹丝不动。缺点position:fixed后整个 body 会跑到视口顶部用户如果中途旋转屏幕、键盘弹起都会看到“内容闪一下”。关闭弹窗时scrollTo会触发一次scroll事件第三方埋点/广告 SDK 可能误报 PV。2. React 自定义 Hook函数组件版import { useLayoutEffect, useRef } from react; export default function useLockBodyScroll(locked) { const scrollTop useRef(0); useLayoutEffect(() { if (!locked) return; const scrollbarWidth window.innerWidth - document.documentElement.clientWidth; scrollTop.current window.pageYOffset; document.body.style.position fixed; document.body.style.top -${scrollTop.current}px; document.body.style.left 0; document.body.style.right 0; document.body.style.paddingRight ${scrollbarWidth}px; // 防止抖动 document.body.style.overflow hidden; // 保险起见 return () { document.body.style.position ; document.body.style.top ; document.body.style.paddingRight ; document.body.style.overflow ; window.scrollTo(0, scrollTop.current); }; }, [locked]); }使用姿势function Modal({ open, children }) { useLockBodyScroll(open); return open ? div classNamemodal{children}/div : null; }3. Vue3 自定义指令组合式 API// v-lock-scrollconstlockScroll{mounted(el,binding){const{value,modifiers}binding;if(!value)return;constscrollbarWidthwindow.innerWidth-document.documentElement.clientWidth;constscrollTopwindow.pageYOffset;el.$scrollTopscrollTop;// 暂存el.$originalStyles{position:document.body.style.position,top:document.body.style.top,paddingRight:document.body.style.paddingRight,overflow:document.body.style.overflow,};document.body.style.positionfixed;document.body.style.top-${scrollTop}px;document.body.style.paddingRight${scrollbarWidth}px;document.body.style.overflowhidden;},updated(el,binding){// 开关切换if(!binding.valuebinding.oldValue){document.body.style.positionel.$originalStyles.position;document.body.style.topel.$originalStyles.top;document.body.style.paddingRightel.$originalStyles.paddingRight;document.body.style.overflowel.$originalStyles.overflow;window.scrollTo(0,el.$scrollTop);}},};exportdefault{install(app){app.directive(lock-scroll,lockScroll);},};模板里一句话div v-lock-scrollmodalVisible classmodal.../div移动端“坑王”iOS 橡皮筋 安卓键盘1. iOS 弹性滚动bounceiOS 的body即使position:fixed仍能拖动因为 Safari 把滚动“挂载”到visualViewport。终极补丁html, body{-webkit-overflow-scrolling:touch;/* 先开启惯性 */height:100%;/* 关键让 viewport 以为没溢出 */}.modal-open{position:fixed;width:100%;}另外给遮罩本身再加一层“兜底”mask.addEventListener(touchmove,ee.preventDefault(),{passive:false});2. 安卓键盘弹起导致window.innerHeight变化现象键盘升起 → 视口高度变小 →fixed的弹窗被“顶上去”。键盘收起 → 高度恢复 → 弹窗回不来直接挡住输入框。检测方案letoriginalHeightwindow.innerHeight;window.addEventListener(resize,(){constdifforiginalHeight-window.innerHeight;if(Math.abs(diff)100){// 键盘弹出document.body.style.height${window.innerHeight}px;}else{// 键盘收起document.body.style.height;}});更现代做法if(visualViewportinwindow){window.visualViewport.addEventListener(resize,e{document.body.style.height${e.target.height}px;});}可访问性别让键盘用户“迷路”锁滚动只是第一步焦点管理才是专业前端的分水岭。弹窗打开时把焦点移到第一个可聚焦元素constfirstFocusablemodal.querySelector(button, [href], input, select, textarea, [tabindex]:not([tabindex-1]));firstFocusable?.focus();限制 Tab 只在弹窗内循环functiontrapFocus(e){constfocusablemodal.querySelectorAll(button, [href], input, select, textarea, [tabindex]:not([tabindex-1]));constfirstfocusable[0];constlastfocusable[focusable.length-1];if(e.shiftKeydocument.activeElementfirst){e.preventDefault();last.focus();}elseif(!e.shiftKeydocument.activeElementlast){e.preventDefault();first.focus();}}modal.addEventListener(keydown,trapFocus);弹窗关闭后把焦点还给触发器triggerBtn.focus();屏幕阅读器给遮罩加aria-hiddentrue、roledialog、aria-modaltrue并在打开时把其余主内容aria-hidden也置为true防止“读屏穿透”。混合终极方案CSS 占位 JS 焦点 内部滚动补丁把上面所有补丁缝合成一套“生产环境可直接复制”的通用组件。// React 为例Vue 思路完全一致 export default function SmartModal({ show, onClose, children }) { const ref useRef(null); const trigger useRef(document.activeElement); useLockBodyScroll(show); // 上一节的 Hook useTrapFocus(ref, show); // 焦点循环代码略 useHideOthers(ref, show); // aria-hidden 主内容 useEffect(() { const handler e e.key Escape onClose(); if (show) window.addEventListener(keydown, handler); return () window.removeEventListener(keydown, handler); }, [show, onClose]); useEffect(() { if (!show trigger.current) { (trigger.current as HTMLElement).focus(); } }, [show]); if (!show) return null; return ( div classNamemodal-mask onClick{onClose} div classNamemodal-main ref{ref} roledialog aria-modaltrue onClick{e e.stopPropagation()} {children} /div /div ); }配套 CSS.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;}.modal-main{max-height:80vh;overflow-y:auto;overscroll-behavior:contain;/* 关键防止链式滚动 */-webkit-overflow-scrolling:touch;}优点不挑框架React / Vue / 原生都能套。滚动条宽度动态占位无抖动。内部滚动区自带橡皮筋修复。焦点、ESC 关闭、aria 全套可访问性标配。调试锦囊快速定位“翻车”现场现象排查思路一行代码弹窗关闭后页面回不到原位检查unlock时scrollTop是否被重置、是否被键盘resize干扰console.log(scrollTop)锁滚动后内部区域滚不动内部节点被加了overflow:hidden检查 CSS 选择器优先级iOS 上还能拖动背景-webkit-overflow-scrolling没加或html没固定检查html.modal-open键盘弹起后按钮被挡住视口高度计算错误用visualViewport重新校准焦点跑出弹窗trapFocus没绑定或选择器写错document.activeElement打印开发小妙招让遮罩层更“聪明”自动识别是否需要锁定如果弹窗内容自身高度 视口高度其实用户滚不动背景可以跳过锁定逻辑减少一次重排。constneedLockmodal.scrollHeightwindow.innerHeight;支持嵌套弹窗维护一个lockStack计数器只有最外层关闭时才解锁letlockCount0;functionlock(){lockCount;if(lockCount1)reallyLock();}functionunlock(){lockCount--;if(lockCount0)reallyUnlock();}适配动态内容高度内容可能是异步渲染的骨架屏高度会变化。监听ResizeObserver动态调整max-height防止“内容撑爆”constronewResizeObserver((){modal.style.maxHeight${window.innerHeight*0.8}px;});ro.observe(modal);结语别让 bug 躲在滚动条后面偷笑锁滚动这件事说小也小说大也能让一整天的排期泡汤。今天我们把“为什么抖、怎么锁、如何还原、移动端特殊癖好、可访问性细节”全部拆了一遍并给出三套可直接粘贴的源码纯 CSS 快速版后台系统随便用JS 冻结版C 端标配混合终极版生产稳如老狗记住两句话用户体验藏在细节里滚动条也是细节。产品经理不一定懂技术但一定能看出“抖没抖”。下回再遇到弹窗背景滑来滑去就把这篇文章甩给他“别慌方案全在这儿复制粘贴年终奖稳了。”欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐DTcode7的博客首页。一个做过前端开发的产品经理经历过睿智产品的折磨导致脱发之后励志要翻身农奴把歌唱一边打入敌人内部一边持续提升自己为我们广大开发同胞谋福祉坚决抵制睿智产品折磨我们码农兄弟专栏系列点击解锁学习路线(点击解锁知识定位《微信小程序相关博客》持续更新中~结合微信官方原生框架、uniapp等小程序框架记录请求、封装、tabbar、UI组件的学习记录和使用技巧等《AIGC相关博客》持续更新中~AIGC、AI生产力工具的介绍例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结《HTML网站开发相关》《前端基础入门三大核心之html相关博客》前端基础入门三大核心之html板块的内容入坑前端或者辅助学习的必看知识《前端基础入门三大核心之JS相关博客》前端JS是JavaScript语言在网页开发中的应用负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客共同构建用户界面。通过操作DOM元素、响应事件、发起网络请求等JS使页面能够响应用户行为实现数据动态展示和页面流畅跳转是现代Web开发的核心《前端基础入门三大核心之CSS相关博客》介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法同时收集精美的CSS效果代码用来丰富你的web网页《canvas绘图相关博客》Canvas是HTML5中用于绘制图形的元素通过JavaScript及其提供的绘图API开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力使得前端绘图技术更加丰富和多样化《Vue实战相关博客》持续更新中~详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅《python相关博客》持续更新中~Python简洁易学的编程语言强大到足以应对各种应用场景是编程新手的理想选择也是专业人士的得力工具《sql数据库相关博客》持续更新中~SQL数据库高效管理数据的利器学会SQL轻松驾驭结构化数据解锁数据分析与挖掘的无限可能《算法系列相关博客》持续更新中~算法与数据结构学习总结通过JS来编写处理复杂有趣的算法问题提升你的技术思维《IT信息技术相关博客》持续更新中~作为信息化人员所需要掌握的底层技术涉及软件开发、网络建设、系统维护等领域的知识《信息化人员基础技能知识相关博客》无论你是开发、产品、实施、经理只要是从事信息化相关行业的人员都应该掌握这些信息化的基础知识可以不精通但是一定要了解避免日常工作中贻笑大方《信息化技能面试宝典相关博客》涉及信息化相关工作基础知识和面试技巧提升自我能力与面试通过率扩展知识面《前端开发习惯与小技巧相关博客》持续更新中~罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等《photoshop相关博客》持续更新中~基础的PS学习记录含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结日常开发办公生产【实用工具】分享相关博客》持续更新中~分享介绍各种开发中、工作中、个人生产以及学习上的工具丰富阅历给大家提供处理事情的更多角度学习了解更多的便利工具如Fiddler抓包、办公快捷键、虚拟机VMware等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进