Prevent body scrolling when the user scrolls on fixed position div - CSS-Tricks

This topic is empty.

Viewing 15 posts - 1 through 15 (of 36 total)

1 2 3 →

Author

Posts
August 25, 2015 at 6:49 am #207055
rlnl
Participant
Hi,

On mobile devices when a position:fixed; element appears on the screen the user can scroll the <body>, through the fixed element.
```
body,
html{
    overflow: hidden;
    margin: 0;
    padding: 0;
}

#fixed {
    background: red;
    position: fixed;
    left:0;
    top: 0;
    width: 200px;
    height: 100%;
}

#content {
    background: blue;
    height: 3000px;
}
```
I tried to add overflow:hidden for <html> and <body> but it didn’t help. I would like to prevent scrolling through the fixed element, but I would like to allow the scroll, when the fixed element is visible, but the user scrolls on <body>.

I tried this with ios and android devices. What is the best solution to solve this?

I created an video to see what’s the exact problem: https://www.youtube.com/watch?v=9h_fjEDDwlc
August 25, 2015 at 7:53 am #207063
Shikkediel
Participant
You’d need some JS for that – disabling default scrolling :
```
var fixed = document.getElementById('fixed');

fixed.addEventListener('touchmove', function(e) {

        e.preventDefault();

}, false);
```
August 25, 2015 at 7:55 am #207065

rlnl
Participant

Thank you. By the way is it the normal behaviour for ios?

August 25, 2015 at 8:34 am #207071

Shikkediel
Participant

Indeed it is, any element that receives a touchmove inside body will trigger momentum scrolling as long as that element’s parent does not have any overflow itself.

Made a minor adjustment by the way (forgot the var part).

August 25, 2015 at 8:35 am #207072

rlnl
Participant

Thanks Shikkediel! I will use it. Btw overflow.. is it possible to use overflow:hidden for body?

August 25, 2015 at 8:38 am #207073

Shikkediel
Participant

As far as I can tell, that will prevent page scrolling altogether…

August 25, 2015 at 8:46 am #207075

rlnl
Participant

The solution is works!

August 25, 2015 at 8:54 am #207076

Shikkediel
Participant

Excellent, I was just thinking if the event might still propagate (bubble up) to body but I’m glad the code was accurate.

:-)

August 25, 2015 at 9:31 am #207079

rlnl
Participant

Sorry, One more thing. Is it prevents the scrolling in the ‘fixed’ div too, because it’s in the body, right?:)

August 25, 2015 at 9:44 am #207081

Shikkediel
Participant

Do you mean that the fixed element has overflow and a scrollbar as well? In that case I suspect scrolling the element will indeed not work when this code is used. Not because it is inside body but for the reason that all touchmove behaviour has been disabled.

Then again, if it has overflow then swiping it will not bubble up and cause momentum page scrolling but ‘normal and local’ scrolling on the element. Then the bit of script wouldn’t be needed in the first place.

Hope that’s not confusing… let me know if I should clarify more.
Or in case I misunderstood, the other way around please. ;-)

August 25, 2015 at 10:23 am #207087

rlnl
Participant

Yes, when the fixed element has too much content and the user needs to scroll it’s not possible because of this script. I realized that when I added it. :)

When the fixed element has overflow, and the scrollbar is visible the problem doesn’t appear, but when the content is only few lines then the problem came up.

I tried to find more examples but all of them forgot to handle this scrolling issue.

August 25, 2015 at 10:27 am #207088

Shikkediel
Participant

Sounds like you need more JS – checking if the element has overflow. If not, use the aforementioned code.

Are you using jQuery on your site? Making some examples would be a lot easier that way.

August 25, 2015 at 10:36 am #207089

rlnl
Participant

Yes, I’m using jQuery. I’m going to play with it. :)

August 25, 2015 at 11:46 am #207100
Shikkediel
Participant
Just a quick scribble for ya :
```
$(function() {

    var fixed = document.getElementById('fixed'), overflow;

    $(window).on('load resize', function() {

    overflow = fixed.scrollHeight-$('#fixed').height();
    });

    fixed.on('touchmove', function() {

    if (overflow) return true;
    else return false;
    });
});
```
Small adaptation made – scrollHeight is a vanilla JS thing.
August 26, 2015 at 6:00 am #207135
Shikkediel
Participant
By the way, if you’d like momentum scrolling inside the fixed element you could add this :
```
#fixed {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
```
Author

Posts

Viewing 15 posts - 1 through 15 (of 36 total)

1 2 3 →

The forum ‘CSS’ is closed to new topics and replies.