模态固定位置内容移位

Question

经过大量的研究，我unable to find a proper solution为当固定位置元素，覆盖图像和标准内容，当模态窗口打开时右移。

注意：我在寻找一个一般的，干净的解决方案，而不是一个硬编码的修复，将只是工作在一个特定的布局。

有谁知道如何解决这个问题？请参考下面这个例子：http://codepen.io/microcipcip/pen/kXdRWK

body { 
    height: 2500px; 
    &.-modal-open { 
     overflow: hidden; 
    } 
} 
.fixed { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    padding: 20px 0; 
    background: #FF0000; 
} 
.modal { 
    overflow-x: hidden; 
    overflow-y: scroll; 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: rgba(0, 0, 0, 0.4); 
    opacity: 0; 
    transition: opacity .2s ease-in-out; 
    body.-modal-open & { 
     opacity: 1; 
    } 
} 

Answer 1

的解决方案是非常简单和纯粹的CSS的解决办法：

.-modal-open .fixed, 
.-modal-open .content { 
    overflow-y:scroll; 
} 

..however，这需要你的内容是不同的样式。你不应该为你的内容使用保证金，而是将它包装在一个容器中，并使用填充。

滚动条的宽度并不总是17px ... 17px是Firefox，但15px是Chrome，有时IE甚至没有滚动条宽度，具体取决于代码。

这里是更新的笔： http://codepen.io/scooterlord/pen/KgKLwB

编辑：忘了说，这是一个跨浏览器的解决方案，完美，无论我测试了它的工作原理。如果浏览器是移动的，那么不管添加/删除多余的滚动条都不会改变宽度，并且取决于浏览器，内容/固定元素的新创建的滚动条总是与最初的滚动条相同。

Answer 2

如何每一个模式打开时增加知识+右缘的身体。这将模拟为滚动条保留的空间。 （知识+是标准的浏览器宽度的宽度）

body.-modal-open { 
    margin-right: 17px; 
} 

同时，用于固定元件重新计算的宽度;

.-modal-open .fixed { 
    width: calc(100% - 17px); 
} 

还有虽然一个问题，CSS背景图像仍然移位，将溶液简单地将其放置在一个div容器，而不是体。

Answer 3

主要技巧是不要使用body作为内容包装。使用专用div作为包装，并将外部模块放置在外面，以便滚动条不会相互干扰。

var $btnShow = document.querySelector('.show'); 
 
var $btnHide = document.querySelector('.hide'); 
 
var $body = document.querySelector('.modal'); 
 
$btnShow.addEventListener('click', function() { 
 
    $body.classList.toggle('-modal-open') 
 
}); 
 
$btnHide.addEventListener('click', function() { 
 
    $body.classList.toggle('-modal-open') 
 
});

.wrapper { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    bottom:0; 
 
    right:0; 
 
    overflow: auto; 
 
} 
 
.content { 
 
    background: url('https://www.dropbox.com/s/m16kxhb2jg5jwwh/bear-800x450.jpg?dl=0&raw=1'); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    height: 2500px; 
 
    width: 100%; 
 
} 
 

 
.clickme { 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    padding: 10px; 
 
    border: none; 
 
    background: #000000; 
 
    color: #ffffff; 
 
    text-transform: uppercase; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.clickme:hover { 
 
    background: grey; 
 
    cursor:pointer 
 
} 
 

 
.modal { 
 
    overflow-x: hidden; 
 
    overflow-y: scroll; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background: rgba(0, 0, 0, 0.4); 
 
    display: none; 
 
    transition: opacity .2s ease-in-out; 
 
    z-index: 3; 
 
} 
 
.modal.-modal-open { 
 
    display:block; 
 
} 
 
.modal-content { 
 
    min-height: 1500px; 
 
    margin: 100px; 
 
    background: url('https://www.dropbox.com/s/u520y7yo711uaxi/poster2.jpg?dl=0&raw=1'); 
 
    background-size: cover; 
 
}

<div class="modal"> 
 
    <div class="modal-content">Content 
 
    <button class="clickme hide">Toggle Modal HIDE!</button> 
 
    </div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div class="content"> 
 
<button class="clickme show">Toggle Modal SHOW!</button> 
 
    </div> 
 
</div>