How to scroll the page when a modal dialog is long

2019-01-30 10:15发布

站内问答 / HTML/CSS
1193 11 6

I have a modal dialog in my app which can get quite long in the y direction. This introduces a problem whereby some of the content of the dialog is hidden off the bottom of the page.

enter image description here

I would like the window scrollbar to scroll the dialog when it is displayed and too long to fit on the screen but leave the main body in place behind the modal. If you use Trello then you know what I'm going for.

Is this possible without using JavaScript to control the scrollbar?

Here is the CSS I have applied to my modal and dialog so far:

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

标签： css scroll
举报
11条回答
Viruses.
2楼-- · 2019-01-30 11:03

fixed positioning alone should have fixed that problem but another good workaround to avoid this issue is to place your modal divs or elements at the bottom of the page not within your sites layout. Most modal plugins give their modal positioning absolute to allow the user keep main page scrolling.

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


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

        </body>
</html>
查看更多
0人赞 添加讨论(0) 举报
别忘想泡老子
3楼-- · 2019-01-30 11:03

Here.. Works perfectly for me

.modal-body { 
    max-height:500px; 
    overflow-y:auto;
}
查看更多
0人赞 添加讨论(0) 举报
Fickle 薄情
4楼-- · 2019-01-30 11:07

Change position

position:fixed;
overflow: hidden;

to

position:absolute;
overflow:scroll;
查看更多
0人赞 添加讨论(0) 举报
家丑人穷心不美
5楼-- · 2019-01-30 11:11

This is what fixed it for me:

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

EDIT: I now use the same method currently used on Twitter where the modal acts sort of like a separate page on top of the current content and the content behind the modal does not move as you scroll.

In essence it is this:

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

With this CSS on the modal:

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

JSFiddle: https://jsfiddle.net/0x0049/koodkcng/
Pure JS version (IE9+): https://jsfiddle.net/0x0049/koodkcng/1/

This works no matter the height or width of the page or modal dialog, allows scrolling no matter where your mouse/finger is, doesn't have the jarring jump some solutions have that disable scroll on the main content, and looks great too.

查看更多
0人赞 添加讨论(0) 举报
在下西门庆
6楼-- · 2019-01-30 11:17

In the end I had had to make changes to the content of the page behind the modal screen to ensure that it never got long enough to scroll the page.

Once I did that, the problems I encountered when applying position: absolute to the dialog were resolved as the user could no longer scroll down the page.

查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)