modal bootstrap menghapus scroll bar

Saat saya memicu tampilan modal di halaman saya, ini memicu bilah gulir menghilang. Ini adalah efek yang mengganggu karena halaman latar belakang mulai bergerak saat modal bergerak masuk / menghilang. Apakah ada obat untuk efek itu?

Ini adalah fitur, kelas modal-openditambahkan ke HTML bodysaat Anda menampilkan modal, dan dihapus saat Anda menyembunyikannya.

Ini membuat bilah gulir menghilang sejak bootstrap css mengatakan

.modal-open {
    overflow: hidden;
}

Anda dapat menimpanya dengan menentukan

.modal-open {
    overflow: scroll;
}

di css Anda sendiri .

Saya pikir mewarisi lebih baik daripada menggulir karena ketika Anda membuka modal, itu akan selalu terbuka dengan gulir, tetapi ketika Anda tidak memiliki gulungan, Anda akan mendapatkan masalah yang sama. Jadi saya hanya melakukan ini:

.modal-open {
  overflow: inherit;
}

Saya dulu

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

Dalam hal ini Anda menghindari untuk menampilkan bilah gulir horizontal

Lebih baik menggunakan overflow-y: scroll dan hapus padding dari body, modal bootstrap menambahkan padding ke body halaman.

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

Kompatibel dengan browser IE: Browser IE melakukan hal yang sama secara default.

Terima kasih Tuhan saya menemukan posting ini! Saya menarik rambut saya mencoba mencari cara untuk mendapatkan kembali scrollbar saya saat menutup jendela menggunakan tautan dekat saya sendiri. Saya mencoba saran untuk CSS tetapi tidak berfungsi dengan benar. Setelah membaca

class modal-open ditambahkan ke badan HTML saat Anda menampilkan modal, dan dihapus saat Anda menyembunyikannya. - @flup

Saya datang dengan solusi menggunakan jquery, jadi jika ada orang lain yang memiliki masalah yang sama dan saran di atas tidak berfungsi -

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

Saya baru saja bermain dengan 'fitur' modals Bootstrap ini. Sepertinya .modalkelas punyaoverflow-y:auto; Jadi pembungkus modal mendapatkan bilah gulirnya sendiri ketika modal itu sendiri menjadi tinggi.

Jika Anda selalu menginginkan scrollbar (desainer sering melakukannya) Pertama atur badan

body {
    overflow-y:scroll;
}

Lalu tangani .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 */
}

Biarkan scrollbar menonaktifkan pada tubuh tidak tersentuh dalam kasus ini

Semua jawaban lain di halaman ini terus membuat konten saya melonjak.

Perhatian!

Meskipun solusi ini bekerja untuk saya sepanjang waktu, kemarin saya mengalami masalah dalam menggunakan perbaikan ini ketika modal dapat diseret dan menjadi besar agar sesuai dengan layar (vertikal). Mungkin ada hubungannya dengan position:stickyelemen yang saya tambahkan?

Lebih baik jika Anda akan membuat file css Anda sendiri untuk menyesuaikan bagian tertentu dari bootsrap Anda.

Jangan Ubah file css dari bootstrap karena itu akan mengubah semua yang ada di bootstrap Anda setelah Anda menggunakannya di bagian lain halaman Anda.

Jika halaman Anda agak panjang, secara otomatis akan menyediakan scroll bar. Dan ketika modal dibuka, itu akan menyembunyikan bilah gulir karena itulah yang dilakukan bootstrap sebagai default.

Untuk menghindari menyembunyikannya saat modal dibuka, cukup timpa dengan meletakkan kode css (di bawah) pada file css Anda sendiri.

.modal-open {
    overflow: scroll;
}

hanya sebaliknya ...

.modal-open {
    overflow: hidden;
}

Selain itu, jika modal popup perlu menggulir dengan konten di dalamnya dan orang tua harus tetap diam, tambahkan berikut ini ke Custom.css Anda (mengganti css)

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

modal bootstrap menambahkan padding setelah terbuka sehingga Anda dapat mencoba kode ini di css Anda sendiri

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

Hal ini mungkin disebabkan bahwa modal pertama (saat ditutup) menghapus kelas modal-buka dari elemen tubuh dan yang kedua tidak akan menambahkannya kembali saat memicu modal-buka.

Dalam hal ini saya akan menggunakan acara untuk memeriksa apakah modal telah ditutup / disembunyikan sepenuhnya dan membuka yang lain

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

Ini akan menunggu sampai modal pertama ditutup untuk memastikan modal-open dihapus dari tubuh dan ditambahkan kembali saat terbuka.

Saya sendiri baru saja mengalami masalah ini, dan menemukan pertanyaan ini dengan cepat membantu saya memahami apa yang menyebabkan perilaku tersebut. Jadi terima kasih.

Namun, menurut saya solusi CSS ini agak janggal. Kecuali, jika Anda secara khusus ingin menyimpan scrollbar (meskipun saya tidak dapat memikirkan alasannya).

Pada dasarnya Bootstrap menerapkan padding-right ke elemen tertentu untuk mengimbangi penghapusan scrollbar.

Oleh karena itu, yang perlu Anda lakukan adalah meletakkan pembungkus ekstra dengan bantalan nol-tepat di sekitar elemen bermasalah Anda (dan memindahkan kelas yang ditargetkan ke atasnya).

yaitu perubahan dari ini ...

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

... untuk ini...

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

Satu-satunya jawaban yang berhasil bagi saya adalah sebagai berikut:

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