Fixed overlay allows to scroll body. Setting overflow hidden to body jumps view to top

Question

In my web project, I have set of blocks, representing projects thumbnails. When I click on thumbnail, the detail view appears. This view is div over full page and has position fixed, z-index bigger than anything else. I can scroll detail (which is of course what I want), but also it sometimes scrolls body. I have tested few solution, which I have found, but none of them helped me completely. if i set body to overflow hidden, it prevents scrolling, but on the other hand, view jumps to top. Another solution: setting body to fixed position and top property to opposite of window.offsetY and then when closing detail setting window.scrollTo(offsetY), this solution also didnt work (detail is on top and i cant scroll).

So question is, how can I prevent scrolling body in fixed overlay element?

sglazkov sglazkov · Accepted Answer · 2015-09-19T17:58:37

if you open detail view, you should add to body class

.modal-open {
    overflow: hidden;
}

and detail view modal should have class

.modal {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}
.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}
.modal-dialog {
    width: 600px;
    margin: 30px auto;
}

html structure

<body class="modal-open">
    ...
    <div class="modal">
        <div class="modal-dialog"></div>
    </div>
</body>

Fixed overlay allows to scroll body. Setting overflow hidden to body jumps view to top

1 Answers