关闭弹出框后禁止页面滚动以及去掉滚动条避免页面内容偏移

关于弹窗后，禁止页面滚动提升弹窗的用户体验弹窗后不允许页面滚动可以通过为内容块设置position:fixed;使其虽然滚动了，但内容块仍然居中显示，给人一种没有滚动的感觉。也可以为html、body标签设置overflow-y:hidden;属性，使其滚动条消失，无法滚动。通常来说，一般都要使用hidden来隐藏滚动条禁止滚动，然后使用absolute或者fixed就看你自己的需求来选择。但是，对html或body设置overflow-y:hidden;之后，由于滚动条没有了，宽度变宽，页面内容会整体偏移一点，虽然只是一点，但是很明显。这简直太影响用户体验了！！去掉滚动条但是避免页面内容偏移知乎上前段时间也提到了这个问题：如何禁止浏览器滚动条滚动，但是又不让它消失？.htmlstyle#delbtn{border:0px;width:24px;height:24px;background-image:url(../images/gdel.jpg);background-repeat:no-repeat;background-position:center;}#delbtn:hover{border:0px;width:23px;height:24px;background-image:url(../images/bdel.jpg);background-repeat:no-repeat;background-position:center;cursor:pointer;}.black_overlay{display:none;position:fixed;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:1001;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);}.white_content{display:none;position:absolute;top:20%;left:10%;width:75%;height:59%;padding:5px15px5px15px;border:2pxsolidorange;background-color:white;z-index:1002;overflow:auto;}stylescriptvarhtmlwidth;$(document).ready(function(){htmlwidth=$(html).width();//获取页面html的宽度，它不包含滚动条的宽度});functionExpressDetail(ID){document.getElementById('body1').style.overflow=hidden;//弹出框时隐藏滚动条document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';varfadewidth=$(#fade).width();//获得遮罩层的宽度，其中包含滚动条的宽度varscrollwidth=fadewidth-htmlwidth;//相减得到滚动条的宽度$(body).css(margin-right,scrollwidth);/*隐藏滚动条时为防止页面位置偏移，设置html或者body的“margin-right”的宽度（我这里设置的是body）等于滚动条的宽度。*/$.ajax({url:../ashx/expressinfo.ashx?operater=detail&ID=+ID+,type:get,dataType:json,contentType:application/json,success:function(datas){}});}functionCloseDetail(){/*关闭弹出框时设置body的滚动条出现*/document.getElementById('body1').style.overflow=scroll;document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none';$(body).css(margin-right,0);/*关闭弹出框时为了防止页面位置偏移设置body的值为0，也就是初始化”margin-right”的值*/}/scriptbodyformdivinputtype='button'class='button-radius'onclick='ExpressDetail(+ID+);'value='详情'//div/*弹出层*/divid=lightclass=white_content/*弹出框标题栏*/divid=light_titlestyle=width:100%;/*弹出框标题栏*/divid=light_title_leftstyle=float:left;width:auto;font-size:16px;font-family:'微软雅黑',Arial,Helvetica,sans-serif;弹出框标题/div/*弹出框关闭按钮*/divid=light_title_rightstyle=float:right;width:auto;font-size:16px;inputtype=buttonid=delbtnonclick=CloseDetail();//div/div/*弹出框内容栏*/divid=light_contentstyle=margin-top:30px;width:100%;内容层/div/div/*遮罩层*/divid=fadeclass=black_overlay/div/form/body/html大体意思就是新建了一个包裹的结构，然后两个宽度相减得到滚动条的宽度，然后输出到head中。当有弹窗发生之后，就为html标签赋予相应的类来margin-right一下，避免滚动条消失引起的内容偏移。