隱藏物體溢出時帶固定位置的元素

Question

我想打開一個超過身體滾動的模態圖層。爲了做到這一點，當顯示圖層時，我將身體溢出設置爲隱藏狀態，並將溢出設置爲在模式圖層上滾動。從視覺上看，一個滾動條取代了另一個。

在後臺我有一個固定位置和100％寬的頂部酒吧。發生的情況是，當主體溢出被設置爲隱藏時，100％寬度div（頂部欄）接受滾動條空間並且其元素向右移動。

如何防止這些元素移動？

我試着計算（javascript）滾動條的寬度，當設置正文溢出時：隱藏，給一個頁邊距右邊：「滾動條寬度」到頂部欄。這沒有用。

此外，還試圖在頂部欄右端的一個虛擬div與溢出設置爲滾動，並強制它顯示滾動條時打開圖層。這個想法是將丟失的滾動條的空間與另一個滾動條放在一起，只在頂部的容器上。這幾乎奏效，但創建了1或2px閃爍。還不夠好。

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); 

Answer 1

基本上...

• 當模式被打開，設置菜單寬度是當前的寬度和設置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>

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

這裏是的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; 
} 

Answer 3

你的代碼中的一些錯誤：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> 

不管怎樣，這不是什麼導致你的問題。首先，你的身體溢出應該足夠了：除非你想防止背景頁面在模態打開的時候滾動，否則不要將overflowY添加到.modal-container。其次，修正模式本身，並使用居中的CSS技巧（左：50％，margin-left：-half-of-your-width）居中。 CSS： 。身體鎖定{overflow：scroll; }

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

希望它有幫助。