Javascript 隐藏实体溢出时具有固定位置的图元移动

我想打开一个模式层，它超过了主体滚动。为了实现这一点，当显示层时，我将主体溢出设置为隐藏，并将溢出设置为在模式层上滚动。从视觉上看，一个滚动条取代了另一个滚动条

在背景中，我有一个固定位置和100%宽度的顶部栏。当body overflow设置为hidden时，100%宽度div（顶栏）占据滚动条空间，其元素向右移动

如何防止这些元素移动？

我试图计算（javascript）滚动条的宽度，当设置body overflow:hidden时，在顶部的滚动条上加一个右边距：“滚动条宽度”。那没用

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

---

这里的问题是

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%"); });

下面是JSFIDLE：

编辑

或者，您可以选择一个固定的宽度，这样就可以做到：

.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>

希望有帮助。
基本上


打开模式时，将菜单宽度设置为当前宽度，并设置一个
窗口。onresize
事件处理程序，该处理程序将菜单调整为正文宽度

当模式关闭时，移除固定宽度和
窗口。onresize
处理程序并将菜单返回到初始状态



本着
less===more
的精神，我冒昧地尽可能简化了您的代码


var body=$（'body'）；
变量菜单=$（“#topBarFixed”）；
函数toggleModal（）{
css（'width'，body.hasClass（'locked'）？“”：menu.width（））；
window.onresize=body.hasClass（'locked'）？''：函数（）{
css（'width'，body.width（））；
}
body.toggleClass（'locked'）；
}
在（'click'，'open model，.close model'，togglemodel）上
正文{
填充顶部：40px；
高度：1000px；
背景：浅蓝色；
}
body.locked{
身高：100%；
溢出：隐藏；
}
.集装箱{
显示：无；
溢出y：滚动；
位置：固定；
顶部：0；右侧：0；
高度：100%；宽度：100%；
背景色：rgba（255、255、255、0.3）；
z指数：400；
}
body.locked.modal容器{
显示：块！重要；
}
.莫代尔{
高度：600px；
宽度：200px；
保证金：50px自动；
背景：印度红；
}
#顶杆固定{
宽度：100%；
背景颜色：浅灰色；
位置：固定；
排名：0；
左：0；
文本对齐：居中；
显示：内联块；
z指数：200；
}
.托巴内容物{
显示：内联flex；
弯曲方向：行；
柔性包装：nowrap；
证明内容：之间的空间；
对齐项目：居中；
}
.1{
宽度：30px；
线高：40px；
}
.开放式模式{
位置：相对位置；
顶部：400px；
}

div
div
div
div
div
向下滚动到打开层

开放层
封闭层
谢谢，第一个解决方案正是我所需要的。我只是改变了我的实际代码，它工作得很好。
<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 {
    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
}