模態固定位置內容移位

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>