在实现弹窗效果的时候，我们通常不希望浏览器继续滚动，尤其是弹窗中有滚动条的时候，双层滚动条的效果和体验极差。页面锁定原理：设置
标签的样式为overflow:hidden在标签中添加padding-right代码，其值为滚动条的宽度实现：functionlockScroll(){letbody=文档.正文;//记录LetoriginBodyOverflow=body.style.overflow;让originBodyPaddingRight=body.style.paddingRight;让originBodyPaddingBottom=body.style.paddingBottom;让originBodyHasLockClass=body.classList.contains('bs-lock-scroll');让hasScroll=hasScroll();让scrollWidth=scrollWidth();//标记本次页面是否被锁定letlocked=false;如果（！originBodyHasLockClass）{body.classList.add（'bs-lock-scroll'）;}if(originBodyOverflow!='hidden'){body.style.overflow='hidden';锁定=真；如果（hasScroll.vertical）{body.style.paddingRight=scrollWidth.vertical+'px';}if(hasScroll.horizo??ntal){body.style.paddingBottom=scrollWidth.horizo??ntal+'px';}}//返回一个解锁滚动条的函数returnnfunction(){letbody=document.body;如果（！originBodyHasLockClass）{body.classList.remove（'bs-lock-scroll'）;}如果（！锁定）{返回；}如果（originBodyOverflow）{身体。style.overflow=originBodyOverflow;}else{body.style.overflow='';//移除body上的溢出属性}if(originBodyPaddingRight&&parseFloat(originBodyPaddingRight)!==scrollWidth.vertical){body.style.paddingRight=originBodyPaddingRight;}else{body.style.paddingRight='';//移除body上的paddingRight属性//移除body上的paddingBottom属性}};};/***获取元素或浏览器滚动条的宽高*@parameledomelement*@returns{{horizo??ntal:number,vertical:number}}*/functionscrollWidth(ele){vartempDiv;vartempInnerDiv=文档ment.createElement('div');varresult={vertical:0,horizo??ntal:0};tempInnerDiv.style.cssText='宽度：200px；高度：200px';if(!ele||ele.nodeType!=1){//如果没有传递dom元素，则获取浏览器的滚动条result.vertical=window.innerWidth-document.documentElement.offsetWidth;result.horizo??ntal=window.innerHeight-document.documentElement.clientHeight;返回结果；}tempDiv=ele.cloneNode(true);tempDiv.style.cssText='宽度：100px；高度：100px；不透明度：0；位置：绝对；左：-100px；溢出：自动；';tempDiv.appendChild(tempInnerDiv);文档.body.appendChild(tempDiv);result.vertical=tempDiv.offsetWidth-tempDiv.clientWidth;result.horizo??ntal=tempDiv.offsetHeight-tempDiv.clientHeight;document.body.removeChild(tempDiv);tempDiv=tempInnerDiv=null;returnresult;}/***判断浏览器或dom元素是否有滚动条*@returns{{horizo??ntal:boolean,vertical:boolean}}*/functionhasScroll(){return{vertical:document.body.scrollHeight>window.innerHeight,horizo??ntal:document.body.scrollWidth>window.innerWidth};}使用：varunLock=lockScroll();//解锁//unLock();效果（多次调用锁定）：