具有固定位置的元素在隐藏主体溢出时移动

Elements with fixed position moving when body overflow is hidden

本文关键字：主体 隐藏 溢出 移动 元素 定位 位置      更新时间：2023-09-26

我想打开一个超越正文滚动的模态层。为此，当显示图层时，我将主体溢出设置为隐藏，并将溢出设置为在模态层上滚动。在视觉上，一个滚动条取代了另一个滚动条。

在背景中，我有一个固定位置和 100% 宽的顶栏。发生的情况是，当主体溢出设置为隐藏时，100% 宽度div（顶部栏）占用滚动条空间，其元素向右移动。

如何防止这些元素移动？

我尝试计算（javascript）滚动条的宽度，并在设置正文溢出：隐藏时，给顶部栏一个右边距："滚动条宽度"。那行不通。

还尝试了顶部栏右端的虚拟div，溢出设置为滚动并强制它在打开图层时显示滚动条。这个想法是用另一个滚动条占用丢失的滚动条的空间，只在顶部容器上。这几乎有效，但产生了 1 或 2px 的闪烁。不够好。

js在这里摆弄基本问题

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>

您的问题是topBarFixed宽度100%。如果此宽度是固定的，则不会有此问题。以下内容已在Chrome和Firefox上进行了测试：

将此行添加到 toggleModal 函数的第一行：

$(".topBarFixed").width($(".topBarFixed").width());

这会将宽度设置为该点条的实际宽度（以像素为单位）。然后，当您关闭图层时，将其设置回 100% 。

close_modal.on('click', function() { toggleModal(); $(".topBarFixed").width("100%"); });

整个代码如下所示：

var body = $('body'),
    main = $('.main'),
    open_modal = $('.open-modal'),
    close_modal = $('.close-modal'),
    modal_container = $('.modal-container'),
    toggleModal = function() {
        $(".topBarFixed").width($(".topBarFixed").width());
        body.toggleClass('body-locked');
        modal_container.toggleClass('dp-block');
    };
open_modal.on('click', toggleModal);
close_modal.on('click', function() { toggleModal(); $(".topBarFixed").width("100%"); });

这是jsFiddle：http://jsfiddle.net/wmk05t0b/5/

编辑

或者，您可以提出一个固定的宽度，这将解决问题：

.topBarFixed
{
    width:715px; /*changed from 100%*/
    height: 40px;
    background-color: lightgray;
    position: fixed;
    top: 0;
    left: 0;
    text-align:center;
    display: inline-block;
    z-index: 200;
}

代码中的一些错误：id只是一个。如果要将相同的样式应用于更多元素，请使用类。

<div class="topBarContent">
    <div class="inner1">div</div>
    <div class="inner1">div</div>
    <div class="inner1">div</div>
    <div class="inner1">div</div>
    <div class="inner1">div</div>
</div>

无论如何，这不是导致您的问题的原因。首先，你的身体溢出应该足够了：不要在你的.modal-container中添加溢出Y，除非你想防止后台页面在模态打开时滚动。其次，修复模态本身，并使用居中的 CSS 技巧将其居中（左：50%，左边距：宽度的一半）。.CSS： .body-lock { 溢出：滚动; }

.modal-container {
    overflow:hidden;
    position:fixed;
    display: none;
    top: 0; right: 0;
    height: 100%; width: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 400;
}
.modal {
    position: fixed;
    height: 600px;
    width: 200px;
    margin: 50px auto 50px -100px;
    background: indianred;
    left:50%;
}
/*Reset your body, you never know*/
body {
    margin:0;
    padding:0
}

希望对您有所帮助。

相关文章：