bootstrap modal ลบแถบเลื่อน

เมื่อฉันทริกเกอร์มุมมองแบบโมดอลในหน้าของฉันมันจะทำให้แถบเลื่อนหายไป มันเป็นเอฟเฟกต์ที่น่ารำคาญเนื่องจากหน้าพื้นหลังเริ่มเคลื่อนไหวเมื่อโมดอลขยับเข้า / หายไป มีวิธีการรักษาสำหรับผลกระทบนั้นหรือไม่?

นี่คือฟีเจอร์คลาสmodal-openจะถูกเพิ่มลงใน HTML bodyเมื่อคุณแสดงโมดอลและจะถูกลบออกเมื่อคุณซ่อนมัน

สิ่งนี้ทำให้แถบเลื่อนหายไปตั้งแต่ bootstrap css บอก

.modal-open {
    overflow: hidden;
}

คุณสามารถลบล้างสิ่งนี้ได้โดยระบุ

.modal-open {
    overflow: scroll;
}

ในcss ของคุณเอง

ฉันคิดว่าการสืบทอดนั้นดีกว่าการเลื่อนเพราะเมื่อคุณเปิดโมดอลมันจะเปิดด้วยการเลื่อนเสมอ แต่เมื่อคุณไม่มีการเลื่อนใด ๆ คุณจะได้รับปัญหาเดียวกัน ฉันแค่ทำสิ่งนี้:

.modal-open {
  overflow: inherit;
}

ฉันใช้

.modal-open {
  overflow-y: scroll;
}

ในกรณีนี้คุณหลีกเลี่ยงการแสดงแถบเลื่อนแนวนอน

จะดีกว่าที่จะใช้ overflow-y: เลื่อนและลบช่องว่างภายในออกจากร่างกายคำกริยา bootstrap เพิ่มช่องว่างในเนื้อหาของหน้า

.modal-open {
  overflow:hidden;
  overflow-y:scroll;
  padding-right:0 !important;
}

เข้ากันได้กับเบราว์เซอร์ IE:เบราว์เซอร์ IE ทำสิ่งเดียวกันตามค่าเริ่มต้น

ขอบคุณพระเจ้าที่ฉันเจอโพสต์นี้! ฉันดึงผมออกพยายามคิดว่าจะเอาแถบเลื่อนกลับมาได้อย่างไรเมื่อปิดหน้าต่างโดยใช้ลิงก์ปิดของตัวเอง ฉันลองทำตามคำแนะนำสำหรับ CSS แล้ว แต่มันทำงานไม่ถูกต้อง ก่อนอ่าน

คลาส modal-open จะถูกเพิ่มลงในเนื้อหา HTML เมื่อคุณแสดงโมดอลและลบออกเมื่อคุณซ่อน - @flup

ฉันคิดวิธีแก้ปัญหาโดยใช้ jquery ดังนั้นในกรณีที่ใครก็ตามมีปัญหาเดียวกันและคำแนะนำข้างต้นไม่ได้ผล -

<script>
            jQuery(document).ready(function () {
jQuery('.closeit').click(function () {
 jQuery('body').removeClass('modal-open');
                });
            });
        </script>

ฉันเพิ่งเล่นกับ 'คุณลักษณะ' ของโมดอล Bootstrap นี้ ดูเหมือนว่า.modalคลาสจะมีoverflow-y:auto;ดังนั้น modal wrapper จึงได้รับแถบเลื่อนของตัวเองเมื่อ modal นั้นสูงขึ้น

หากคุณต้องการแถบเลื่อนเสมอ (นักออกแบบมักจะทำ) ก่อนอื่นให้ตั้งค่าร่างกาย

body {
    overflow-y:scroll;
}

แล้วจัดการ .modal-open

.modal-open .modal {
    overflow-y:scroll; /* Force a navbar on .modal */
}

.modal-open .topnavbar-wrapper {
    padding-right:17px; /* Noticed that right aligned navbar content got overlapped by the .modal scrollbar */
}

ปล่อยให้แถบเลื่อนปิดใช้งานบนร่างกายโดยไม่ถูกแตะต้องในกรณีนี้

คำตอบอื่น ๆ ทั้งหมดในหน้านี้ทำให้เนื้อหาของฉันก้าวกระโดด

โปรดทราบ!

แม้ว่าวิธีนี้จะใช้ได้ผลสำหรับฉันตลอดเวลา แต่เมื่อวานนี้ฉันมีปัญหาในการใช้การแก้ไขนี้เมื่อโมดอลลากได้และมีขนาดใหญ่เพื่อให้พอดีกับหน้าจอ (แนวตั้ง) มันอาจเกี่ยวข้องกับposition:stickyองค์ประกอบที่ฉันเพิ่มเข้าไป?

จะดีกว่าถ้าคุณจะสร้างไฟล์ css ของคุณเองเพื่อปรับแต่งบางส่วนของ bootsrap ของคุณ

อย่าเปลี่ยนไฟล์ css ของ bootstrap เพราะมันจะเปลี่ยนทุกอย่างใน bootstrap ของคุณเมื่อคุณใช้มันในส่วนอื่น ๆ ของเพจ

หากหน้าของคุณค่อนข้างยาวมันจะมีแถบเลื่อนโดยอัตโนมัติ และเมื่อโมดอลเปิดขึ้นมันจะซ่อนแถบเลื่อนเพราะนั่นคือสิ่งที่ bootstrap ทำเป็นค่าเริ่มต้น

เพื่อหลีกเลี่ยงการซ่อนเมื่อโมดอลเปิดขึ้นเพียงแค่ลบล้างโดยใส่รหัส css (ด้านล่าง) ในไฟล์ css ของคุณเอง

.modal-open {
    overflow: scroll;
}

ในทางกลับกัน ...

.modal-open {
    overflow: hidden;
}

นอกจากนี้หากป๊อปอัปโมดอลจำเป็นต้องเลื่อนโดยมีเนื้อหาภายในและพาเรนต์ต้องอยู่นิ่งให้เพิ่มสิ่งต่อไปนี้ใน Custom.css ของคุณ (แทนที่ css)

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}
.modal-open {
    overflow: hidden;
    overflow-y: scroll;
    padding-right: 0 !important;
}

คำตอบเดียวที่เหมาะกับฉันมีดังต่อไปนี้:

.modal-open {
  padding-right: 0 !important;
}
html {
  overflow-y: scroll !important;
}

โมดอล bootstrap จะเพิ่มช่องว่างภายในเมื่อเปิดขึ้นเพื่อให้คุณสามารถลองใช้รหัสนี้ใน css ของคุณเอง

.modal-open {
    padding: 0 !important;
}

อาจเป็นเพราะโมดอลที่ 1 (เมื่อปิด) ลบคลาสโมดอลที่เปิดออกจากองค์ประกอบของร่างกายและอันที่สองจะไม่เพิ่มกลับเข้าไปเมื่อทริกเกอร์โมดอลเปิด

ในกรณีนี้ฉันจะใช้เหตุการณ์เพื่อตรวจสอบว่าโมดอลถูกปิด / ซ่อนจนสุดแล้วและเปิดอีกอัน

let modal1 = $('.modal1);
let modal2 = $('.modal2);
$modal1.on('hidden.bs.modal', function (e) {
   $modal2.modal('show');
});

สิ่งนี้จะรอจนกว่าโมดอลที่ 1 จะปิดเพื่อให้แน่ใจว่าโมดอลเปิดถูกลบออกจากร่างกายและเพิ่มใหม่เมื่อเปิด

ฉันเพิ่งมีปัญหานี้ด้วยตัวเองและการค้นหาคำถามนี้ช่วยให้ฉันเข้าใจได้อย่างรวดเร็วว่าอะไรเป็นสาเหตุของพฤติกรรม ขอบคุณมาก

อย่างไรก็ตามฉันพบว่าวิธีแก้ปัญหา CSS เหล่านี้ค่อนข้างไม่ดี เว้นแต่ว่าคุณต้องการเก็บแถบเลื่อนไว้เป็นพิเศษ (แม้ว่าฉันจะไม่สามารถคิดเหตุผลได้ก็ตาม)

โดยพื้นฐานแล้ว Bootstrap จะใช้ช่องว่างภายในกับองค์ประกอบบางอย่างเพื่อชดเชยการลบแถบเลื่อน

ดังนั้นสิ่งที่คุณต้องทำคือใส่กระดาษห่อหุ้มพิเศษโดยมีช่องว่างเป็นศูนย์รอบ ๆ องค์ประกอบที่เป็นปัญหาของคุณ (และย้ายคลาสที่กำหนดเป้าหมายไปที่มัน)

คือเปลี่ยนจากนี้ ...

<div class="fixed-top p-1 bg-dark">
    ...this content will move as padding will be modified...
</div>

... สำหรับสิ่งนี้...

<div class="fixed-top p-0 bg-dark">
    <div class="p-1">
        ...this content won't move...
    </div>
</div>