Làm thế nào để cuộn trang khi hộp thoại phương thức dài hơn màn hình?

Tôi có một hộp thoại phương thức trong ứng dụng của mình có thể khá dài theo hướng y. Điều này dẫn đến một vấn đề trong đó một số nội dung của hộp thoại bị ẩn ở cuối trang.

Tôi muốn thanh cuộn cửa sổ cuộn hộp thoại khi nó được hiển thị và quá dài để vừa trên màn hình nhưng vẫn để phần nội dung chính ở vị trí đằng sau phương thức. Nếu bạn sử dụng Trello thì bạn biết tôi sẽ làm gì.

Điều này có khả thi nếu không sử dụng JavaScript để điều khiển thanh cuộn không?

Đây là CSS tôi đã áp dụng cho phương thức và hộp thoại của mình cho đến nay:

body.blocked {
  overflow: hidden;
}

.modal-screen {
  background: #717174;
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.9;
  z-index: 50;
}

.dialog {
  background: #fff;
  position: fixed;
  padding: 12px;
  top: 20%;
  left: 50%;
  z-index: 10000;
  border-radius: 5px;
  box-shadow: 0, 0, 8px, #111;
}

chỉ dùng

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

nó sẽ sắp xếp phương thức của bạn và sau đó cung cấp cho nó một cuộn dọc

Đây là những gì đã sửa nó cho tôi:

max-height: 100%;
overflow-y: auto;

CHỈNH SỬA : Bây giờ tôi sử dụng cùng một phương pháp hiện đang được sử dụng trên Twitter, nơi phương thức hoạt động giống như một trang riêng biệt ở trên nội dung hiện tại và nội dung đằng sau phương thức không di chuyển khi bạn cuộn.

Về bản chất nó là thế này:

var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
$('body').css({
  marginRight: scrollBarWidth,
  overflow: 'hidden'
});
$modal.show();

Với CSS này trên phương thức:

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;

JSFiddle: https://jsfiddle.net/0x0049/koodkcng/
Phiên bản JS thuần túy (IE9 +): https://jsfiddle.net/0x0049/koodkcng/1/

Điều này hoạt động bất kể chiều cao hay chiều rộng của trang hoặc hộp thoại phương thức, cho phép cuộn bất kể chuột / ngón tay của bạn ở đâu, không có bước nhảy chói tai mà một số giải pháp có chức năng vô hiệu hóa cuộn trên nội dung chính và trông cũng rất tuyệt.

Thay đổi position

position:fixed;
overflow: hidden;

đến

position:absolute;
overflow:scroll;

Đây là bản demo của tôi về cửa sổ phương thức tự động thay đổi kích thước theo nội dung của nó và bắt đầu cuộn khi nó không vừa với cửa sổ.

Bản trình diễn cửa sổ phương thức (xem nhận xét trong mã nguồn HTML)

Tất cả chỉ được thực hiện với HTML và CSS - không cần JS để hiển thị và thay đổi kích thước cửa sổ phương thức (nhưng tất nhiên bạn vẫn cần nó để hiển thị cửa sổ - trong phiên bản mới bạn không cần JS nào cả).

Cập nhật (thêm bản demo):

• Cửa sổ phương thức được căn chỉnh lên trên cùng

• Cửa sổ phương thức căn giữa

• Bản demo cũ sử dụng Javascript

Vấn đề là phải có DIV bên ngoài và bên trong, trong đó bên ngoài xác định vị trí cố định và bên trong tạo ra cuộn. (Trong bản demo thực sự có nhiều DIV hơn để làm cho chúng trông giống như một cửa sổ phương thức thực tế.)

        #modal {
            position: fixed;
            transform: translate(0,0);
            width: auto; left: 0; right: 0;
            height: auto; top: 0; bottom: 0;
            z-index: 990; /* display above everything else */
            padding: 20px; /* create padding for inner window - page under modal window will be still visible */
        }

        #modal .outer {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 999;
        }

        #modal .inner {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: auto;       /* allow to fit content (if smaller)... */
            max-height: 100%;   /* ... but make sure it does not overflow browser window */

            /* allow vertical scrolling if required */
            overflow-x: hidden;
            overflow-y: auto;

            /* definition of modal window layout */
            background: #ffffff;
            border: 2px solid #222222;
            border-radius: 16px; /* some nice (modern) round corners */
            padding: 16px;       /* make sure inner elements does not overflow round corners */
        }

định vị cố định một mình lẽ ra đã khắc phục được vấn đề đó nhưng một giải pháp tốt khác để tránh vấn đề này là đặt các div hoặc phần tử phương thức của bạn ở cuối trang không nằm trong bố cục trang web của bạn. Hầu hết các plugin phương thức đều cung cấp vị trí phương thức tuyệt đối để cho phép người dùng tiếp tục cuộn trang chính.

<html>
        <body>
        <!-- Put all your page layouts and elements


        <!-- Let the last element be the modal elemment  -->
        <div id="myModals">
        ...
        </div>

        </body>
</html>

Đây .. Hoạt động hoàn hảo cho tôi

.modal-body { 
    max-height:500px; 
    overflow-y:auto;
}

cách đơn giản bạn có thể làm điều này bằng cách thêm css này Vì vậy, bạn vừa thêm cái này vào CSS:

.modal-body {
position: relative;
padding: 20px;
height: 200px;
overflow-y: scroll;
}

và nó đang hoạt động!

position:fixedngụ ý rằng, tốt, cửa sổ phương thức sẽ vẫn cố định so với quan điểm. Tôi đồng ý với đánh giá của bạn rằng nó phù hợp trong trường hợp này, với lưu ý rằng tại sao bạn không thêm thanh cuộn vào chính cửa sổ phương thức?

Nếu vậy, hãy sửa max-heightvà overflowcác thuộc tính sẽ thực hiện thủ thuật.

Cuối cùng, tôi đã phải thực hiện các thay đổi đối với nội dung của trang phía sau màn hình phương thức để đảm bảo rằng nó không bao giờ đủ lâu để cuộn trang.

Khi tôi đã làm điều đó, các vấn đề tôi gặp phải khi áp dụng position: absolutecho hộp thoại đã được giải quyết vì người dùng không thể cuộn xuống trang nữa.

Thanh cuộn của Trang cửa sổ có thể nhấp được khi Chế độ mở

Cái này phù hợp với tôi. CSS thuần túy.

<style type="text/css">

body.modal-open {
padding-right: 17px !important;
}

.modal-backdrop.in {
margin-right: 16px; 

</style>

Hãy thử nó và cho tôi biết

Tôi muốn thêm câu trả lời CSS thuần túy của mình cho vấn đề này về phương thức với chiều rộng và chiều cao động. Đoạn mã sau cũng hoạt động với các yêu cầu sau:

1. Đặt modal ở giữa màn hình
2. Nếu phương thức cao hơn chế độ xem, dimmer dimmer (không phải nội dung phương thức)

HTML:

<div class="modal">
    <div class="modal__content">
        (Long) Content
    </div>
</div>

CSS / LESS:

.modal {
    position: fixed;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: @qquad;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.7);
    z-index: @zindex-modal;

    &__content {
        width: 900px;
        margin: auto;
        max-width: 90%;
        padding: @quad;
        background: white;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
    }
}

Bằng cách này, phương thức luôn nằm trong khung nhìn. Chiều rộng và chiều cao của phương thức linh hoạt theo ý muốn. Tôi đã xóa biểu tượng đóng của mình khỏi cái này vì đơn giản.