Các yếu tố có vị trí cố định di chuyển khi tràn cơ thể bị ẩn

Question

Tôi muốn mở một lớp phương thức vượt qua cuộn cơ thể. Để thực hiện điều đó, khi lớp được hiển thị, tôi thiết lập tràn cơ thể để ẩn và tràn để cuộn trên lớp phương thức. Trực quan, một thanh cuộn sẽ thay thế thanh cuộn kia.

Trong nền, tôi có thanh trên cùng với vị trí cố định và rộng 100%. Điều gì xảy ra là khi tràn cơ thể được đặt thành ẩn, 100% chiều rộng div (thanh trên cùng) chiếm không gian thanh cuộn và các phần tử của nó di chuyển sang phải.

Làm cách nào để ngăn các yếu tố đó chuyển động?

tôi đã cố gắng để tính toán (javascript) độ rộng của thanh cuộn và khi thiết tràn cơ thể: ẩn, đưa ra một margin-right: "width thanh cuộn" vào thanh trên cùng. Điều đó không hiệu quả.

Cũng thử một div giả ở đầu bên phải của thanh trên cùng với bộ tràn để cuộn và buộc nó hiển thị thanh cuộn khi lớp được mở. Ý tưởng là lấy khoảng trống của thanh cuộn bị thiếu bằng một thanh cuộn khác, chỉ trên hộp chứa trên cùng. Điều đó hầu như đã làm việc nhưng tạo ra một nhấp nháy 1 hoặc 2px. Không đủ tốt.

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

Về cơ bản ...

• Khi phương thức được mở, thiết lập độ rộng menu để chiều rộng của nó hiện tại và thiết lập một handler window.onresize sự kiện mà sẽ thay đổi kích thước menu để chiều rộng của cơ thể.

• Khi phương thức được đóng, hãy xóa chiều rộng cố định và xử lý window.onresize và trả lại menu về trạng thái ban đầu.

---

Với tinh thần less === more Tôi đã lấy sự tự do của việc đơn giản hóa mã của bạn càng nhiều càng tốt tôi có thể.

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

Vấn đề của bạn ở đây là topBarFixed có chiều rộng 100%. Nếu chiều rộng này đã được cố định, bạn sẽ không gặp phải vấn đề này. Sau đây đã được thử nghiệm trên Chrome và Firefox:

Thêm dòng này vào dòng đầu tiên chức năng toggleModal của bạn:

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

đó sẽ thiết lập chiều rộng với chiều rộng thực tế (tính bằng pixel) của thanh tại điểm đó. Sau đó, khi bạn đóng lớp, đặt nó trở lại 100%.

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

Toàn bộ mã trông giống như:

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

Và đây là jsFiddle: http://jsfiddle.net/wmk05t0b/5/

Sửa

Tùy chọn, bạn chỉ có thể đưa ra một chiều rộng cố định, và điều đó sẽ thực hiện thủ thuật:

.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

Một số lỗi trong mã của bạn: id chỉ là một. Sử dụng các lớp nếu bạn muốn áp dụng cùng một kiểu cho nhiều phần tử hơn.

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

Dù sao, đó không phải là nguyên nhân gây ra sự cố của bạn. Trước hết, tràn cơ thể của bạn là đủ: không thêm tràn vào .modal-container trừ khi bạn muốn ngăn trang nền cuộn khi chế độ đang mở. Thứ hai, sửa chữa các phương thức chính nó, và trung tâm nó bằng cách sử dụng thủ thuật CSS trung tâm (trái: 50%, lề trái: -ralf-of-bạn-chiều rộng). CSS: .khóa cơ thể bị khóa { : cuộn; }

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

Hy vọng điều đó sẽ hữu ích.