bootstrap modal loại bỏ thanh cuộn

Khi tôi kích hoạt chế độ xem phương thức trong trang của mình, nó sẽ kích hoạt thanh cuộn biến mất. Đó là một hiệu ứng khó chịu vì trang nền bắt đầu di chuyển khi phương thức di chuyển vào / biến mất. Có cách chữa trị nào cho hiệu quả không?

Đây là một tính năng, lớp modal-openđược thêm vào HTML bodykhi bạn hiển thị phương thức và bị xóa khi bạn ẩn nó.

Điều này làm cho thanh cuộn biến mất vì css bootstrap nói

.modal-open {
    overflow: hidden;
}

Bạn có thể ghi đè điều này bằng cách chỉ định

.modal-open {
    overflow: scroll;
}

trong css của riêng bạn .

Tôi nghĩ rằng kế thừa tốt hơn cuộn vì khi bạn mở modal, nó sẽ luôn mở bằng cuộn, nhưng khi bạn không có bất kỳ cuộn nào, bạn sẽ gặp vấn đề tương tự. Vì vậy, tôi chỉ làm điều này:

.modal-open {
  overflow: inherit;
}

Tôi đã sử dụng

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

Trong trường hợp này, bạn tránh hiển thị thanh cuộn ngang

Tốt hơn là sử dụng tràn-y: cuộn và xóa phần đệm khỏi nội dung, phương thức bootstrap đã thêm phần đệm vào nội dung trang.

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

Trình duyệt IE Tương thích: Trình duyệt IE hoạt động tương tự theo mặc định.

Cảm ơn Chúa, tôi đã xem qua bài viết này! Tôi đang vò đầu bứt tóc để cố gắng tìm cách lấy lại thanh cuộn khi đóng cửa sổ bằng cách sử dụng liên kết đóng của chính mình. Tôi đã thử các đề xuất cho CSS nhưng nó không hoạt động bình thường. Sau khi đọc

class modal-open được thêm vào nội dung HTML khi bạn hiển thị phương thức và bị xóa khi bạn ẩn nó. - @flup

Tôi đã đưa ra một giải pháp bằng cách sử dụng jquery, vì vậy, trong trường hợp bất kỳ ai khác gặp vấn đề tương tự và các đề xuất ở trên không hoạt động -

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

Tôi chỉ đang chơi với 'tính năng' này của các phương thức Bootstrap. Có vẻ như .modallớp có overflow-y:auto;Vì vậy, trình bao bọc phương thức có thanh cuộn của riêng mình khi phương thức tự trở nên cao.

Nếu bạn luôn muốn có một thanh cuộn (các nhà thiết kế thường làm) Đầu tiên hãy đặt phần thân

body {
    overflow-y:scroll;
}

Sau đó xử lý .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 */
}

Để nguyên tính năng tắt thanh cuộn trên nội dung trong trường hợp này

Tất cả các câu trả lời khác trên trang này tiếp tục làm cho nội dung của tôi nhảy vọt.

Đứng lên!

Mặc dù giải pháp này đã hoạt động với tôi mọi lúc, nhưng ngày hôm qua tôi đã gặp sự cố khi sử dụng bản sửa lỗi này khi phương thức có thể kéo và lớn để vừa với màn hình (theo chiều dọc). Nó có thể liên quan đến position:stickycác yếu tố tôi đã thêm?

Tốt hơn nếu bạn tạo tệp css của riêng mình để tùy chỉnh một phần nhất định của giày cao cổ của bạn.

Không thay đổi tệp css của bootstrap vì nó sẽ thay đổi mọi thứ trong bootstrap của bạn khi bạn sử dụng nó trong các phần khác của trang.

Nếu trang của bạn hơi dài, nó sẽ tự động cung cấp một thanh cuộn. Và khi phương thức được mở, nó sẽ ẩn thanh cuộn vì đó là những gì bootstrap làm mặc định.

Để tránh ẩn nó khi mở modal, chỉ cần ghi đè nó bằng cách đặt mã css (bên dưới) vào tệp css của riêng bạn.

.modal-open {
    overflow: scroll;
}

ngược lại ...

.modal-open {
    overflow: hidden;
}

Ngoài ra, nếu cửa sổ bật lên phương thức cần cuộn với nội dung bên trong và phần chính cần nằm yên, hãy thêm phần sau vào Custom.css của bạn (ghi đè css)

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

phương thức bootstrap thêm một phần đệm khi nó mở ra để bạn có thể thử mã này trong css của riêng bạn

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

Điều này có thể là do phương thức thứ nhất (khi đóng) loại bỏ modal-open class khỏi phần tử body và phương thức thứ hai sẽ không thêm nó trở lại khi kích hoạt modal-open.

Trong trường hợp này, tôi sẽ sử dụng sự kiện để kiểm tra xem phương thức đã được đóng / ẩn hoàn toàn hay chưa và mở một phương thức khác

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

Điều này sẽ đợi cho đến khi phương thức thứ nhất được đóng lại để đảm bảo rằng phương thức mở được xóa khỏi nội dung và được thêm lại khi mở.

Tôi vừa gặp sự cố này và việc tìm thấy câu hỏi này nhanh chóng giúp tôi hiểu nguyên nhân gây ra hành vi. Vì vậy, cảm ơn.

Tuy nhiên, tôi thấy các cách giải quyết CSS này hơi không phù hợp. Trừ khi, tức là bạn muốn giữ lại các thanh cuộn (mặc dù tôi không thể nghĩ ra lý do cho điều đó).

Về cơ bản Bootstrap đang áp dụng padding-right cho các phần tử nhất định để bù đắp cho việc loại bỏ thanh cuộn.

Do đó, tất cả những gì bạn cần làm là đặt thêm một trình bao bọc không có phần đệm bên phải xung quanh phần tử có vấn đề của bạn (và di chuyển lớp đang được nhắm mục tiêu lên đó).

tức là thay đổi từ cái này ...

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

... đến đây ...

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