我想打开一个覆盖主体滚动的模态层。为此,当图层显示时,我将 body overflow 设置为 hidden,并将 overflow 设置为在 modal 图层上滚动。在视觉上,一个滚动条替换了另一个。
在背景中,我有一个固定位置且 100% 宽的顶栏。当 body overflow 设置为 hidden 时,会发生什么情况,100% 宽度的 div(顶部栏)占用滚动条空间并且其元素向右移动。
如何防止这些元素移动?
我尝试计算 (javascript) 滚动条的宽度,并在设置 body overflow: hidden 时,给顶部栏一个 margin-right: "scrollbar width"。那没有用。
还尝试在顶部栏的右端设置一个虚拟 div,将溢出设置为滚动并强制它在打开图层时显示滚动条。这个想法是用另一个滚动条占用丢失的滚动条的空间,只在顶部容器上。这几乎奏效了,但产生了 1 或 2 像素的闪烁。不够好。
jsFiddle here with the basic problem
var body = $('body'),
main = $('.main'),
open_modal = $('.open-modal'),
close_modal = $('.close-modal'),
modal_container = $('.modal-container'),
toggleModal = function() {
body.toggleClass('body-locked');
modal_container.toggleClass('dp-block');
};
open_modal.on('click', toggleModal);
close_modal.on('click', toggleModal);
最佳答案
基本上...
打开模式时,将菜单宽度设置为其当前宽度并设置一个
window.onresize
事件处理程序,该事件处理程序会将菜单的大小调整为主体的宽度宽度。当模式关闭时,删除固定宽度和
window.onresize
处理程序并将菜单返回到它的初始状态。
本着less === more
的精神,我已经尽可能地简化了您的代码。
var body = $('body');
var menu = $('#topBarFixed');
function toggleModal() {
menu.css('width', body.hasClass('locked') ? '' : menu.width());
window.onresize = body.hasClass('locked') ? '' : function () {
menu.css('width', body.width());
}
body.toggleClass('locked');
}
body.on('click', '.open-modal, .close-modal', toggleModal);
body {
padding-top: 40px;
height: 1000px;
background: lightblue;
}
body.locked {
height: 100%;
overflow: hidden;
}
.modal-container {
display: none;
overflow-y: scroll;
position: fixed;
top: 0; right: 0;
height: 100%; width: 100%;
background-color: rgba(255, 255, 255, 0.3);
z-index: 400;
}
body.locked .modal-container {
display: block !important;
}
.modal {
height: 600px;
width: 200px;
margin: 50px auto;
background: indianred;
}
#topBarFixed {
width: 100%;
background-color: lightgray;
position: fixed;
top: 0;
left: 0;
text-align:center;
display: inline-block;
z-index: 200;
}
.topBarContent {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.inner1 {
width:30px;
line-height: 40px;
}
.open-modal {
position: relative;
top: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="topBarFixed">
<div class="topBarContent">
<div id="inner" class="inner1">div</div>
<div id="inner" class="inner1">div</div>
<div id="inner" class="inner1">div</div>
<div id="inner" class="inner1">div</div>
<div id="inner" class="inner1">div</div>
</div>
</div>
<p>Scroll down to open layer</p>
<button class="open-modal">Open layer</button>
<div class="modal-container">
<div class="modal">
<button class="close-modal">Close layer</button>
</div>
</div>
关于javascript - 隐藏主体溢出时固定位置移动的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30898298/