What's the right way to unable scrolling when a div is opened in the center of my page?

Question

I have created a pop-up div for my contact form in my website.

this is the current HTML:

<div class="contact_form">

    <div class="form_container">
    </div>

</div>

and this is my CSS:

.contact_form{
    display    : none;
    width      : 100%; 
    height     : 100%;
    background : rgba(0, 0, 0, 0.7);;
    position   : absolute;
    top        : 0;
    left       : 0;
}

.contact_form .form_container{
    background-image: url('images/popup-post-it_2.png');
    background-size: 100%;
    background-repeat: no-repeat;
    display: block;
    width: 33.4em;
    z-index: 1001;
    position: fixed;
    top: 22%;
    left: 34%;
    padding-left: 10px;
    margin: auto;
    height: 33em;
}

2 problems:

I can scroll the page - and I shouldn't be able to do that.
when I scroll - the ".form_container" scrolls with me.

I know how to disable it using javascript, but I find it wrong from past experiments, makes things messy.

Is there a more elegant way to do this, maybe using CSS ?

http://jsfiddle.net/246m2u8y/21/

With "when I scroll - the ".form_container" scrolls with me" do you mean it stays in the middle of the page? If you don't want that don't make it's position fixed. — jazZRo, Feb 24 '15 at 09:35
Also please update the fiddle with code that clearly shows the problem. It is not clear to me now. — jazZRo, Feb 24 '15 at 09:37
@jazZRo It stays in the same position on the screen - but when scrolling it scrolles with the page. I updated the jsfiddle for a better example for you. — W.Doch, Feb 24 '15 at 09:46
anyway, I have to disable the scrolling when this is opened. — W.Doch, Feb 24 '15 at 09:46
@CBroe: I'm not so sure about that, Hatul prefers a CSS solution. — jazZRo, Feb 24 '15 at 09:52

Alvaro · Accepted Answer · 2015-02-25T11:46:20.840

2

I would suggest what dropbox did in their website. (after clicking in "Sign in").

They keep the scrollbar but disabled it. This way, the page won't "jump" while removing the scrollbar and it would look much better.

When removing the scrollbar, the centered elements of the site have to recalculate their position and they get moved causing a "flicker" or a "jump" in the website which is far from ideal as you can see in this example in comparison with this other one in which the scroll bar stills visible.

If you take a look at their approach you will notice they add a class to the body element for it. You can do it in this way:

$('.demo').click(function(){
    $('html').addClass('noscroll');
});

And the css for it:

 html.noscroll{
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
    z-index: 10;
 }

Demo online

edited Feb 25 '15 at 11:46

answered Feb 24 '15 at 11:39

Alvaro

37,936
23
138
304

@Alvaro: I did it once on the body element like in my answer but would like to know why the html element is better for this. Can you explain it? – jazZRo Feb 25 '15 at 11:30
@jazZRo the main difference between your method and this one is that in yours the scroll bar disappears. When this happens, the centered elements of the site have to recalculate their position and they get moved causing a "flicker" or a "jump" in the website which is far from ideal. Take a look at [this example](http://jsfiddle.net/246m2u8y/24/) and you will see how the box gets moved when toggling the scrolling. In comparison to [this one](http://jsfiddle.net/dh834zgw/2/). – Alvaro Feb 25 '15 at 11:43
@Alvaro: Thanks for your explanation! I guess in my situation there were no elements that could jump, otherwise I would have known this. Learned something new today :-) Thanks again! – jazZRo Feb 25 '15 at 12:33
1

A late addition: this solution doesn't work very well for iOS. Putting `position: fixed` on `` makes safari enlarge the URL bar, which is jarring. Also, Dropbox itself is no longer 'locking' the scroll. Click login and the background freely scrolls. – crowhill Oct 12 '15 at 16:01

score 0 · Answer 2 · answered Feb 24 '15 at 10:27

0

When the popup opens you only have to set a class on the body to set it fixed:

body.popup-visible {
    position   : fixed;
    width: 100%;
    height: 100%;
}

See the updated fiddle.

answered Feb 24 '15 at 10:27

jazZRo

1,548
1
15
17

What's the right way to unable scrolling when a div is opened in the center of my page?

2 Answers2