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

关于弹窗后，禁止页面滚动提升弹窗的用户体验弹窗后不允许页面滚动可以通过为内容块设置position: fixed;使其虽然滚动了，但内容块仍然居中显示，给人一种没有滚动的感觉。也可以为html、body标签设置overflow-y: hidden;属性，使其滚动条消失，无法滚动。通常来说，一般都要使用 hidden 来隐藏滚动条禁止滚动，然后使用 absolute 或者 fixed 就看你自己的需求来选择。但是，对html 或 body设置overflow-y: hidden;之后，由于滚动条没有了，宽度变宽，页面内容会整体偏移一点，虽然只是一点，但是很明显。这简直太影响用户体验了！去掉滚动条但是避免页面内容偏移知乎上前段时间也提到了这个问题：如何禁止浏览器滚动条滚动，但是又不让它消失？. #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: 5px 15px 5px 15px; border: 2px solid orange; background-color: white; z-index: 1002; overflow: auto; var htmlwidth; $(document).ready(function () htmlwidth = $(html).width(); /获取页面html的宽度，它不包含滚动条的宽度 );function ExpressDetail(ID) document.getElementById(body1).style.overflow= hidden;/弹出框时隐藏滚动条 document.getElementById(light).style.display = block; document.getElementById(fade).style.display = block; var fadewidth = $(#fade).width(); /获得遮罩层的宽度，其中包含滚动条的宽度 var scrollwidth = 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) );function CloseDetail() /*关闭弹出框时设置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”的值*/ /*弹出层*/*弹出框标题栏*/*弹出框标题栏*/ 弹出框标题/*弹出框关闭按钮*/ /*弹出框内容栏*/内容层/*遮罩