Prevent body scrolling when the user scrolls on fixed position div

[rlnl]

Yes, thank you. I added it. :)

[cljaguar]

hi, can you help me too… :)
i’d like to prevent body scrolling or better #shadow div, when off canvas menu will appear #menu-wrap, but also i’d like to scroll #menu-wrap because there is a lot of sub menu. thanks

i think the problem is that,:
http://www.civico52.com
i have a problem on iphone, when i’ll open a sub-menu, i can’t scroll it, because scroll the body on the bottom, i have to close and re-open te menu to fix it
thanks

[Beverleyh]

This appears to work. Apply the same logic to your own website http://fofwebdesign.co.uk/template/_testing/test/fixed-menu-scroll.htm

[cljaguar]

wow! thanks!!!
right now i’d like to hide scroll bar “in firefox”, is it possible?
i made this for use it only on small display:
.zacan-scrolling { position:fixed; width:300px; height:100%; overflow:hidden }
.za-icon-list { list-style-type:none; height:100%; overflow:auto; -webkit-overflow-scrolling:touch; margin:0 }
::-webkit-scrollbar { display: none; }

[Beverleyh]

As far as I’m aware, there is no Firefox equivalent for hiding scrollbars with CSS like you can in Chrome. I don’t know what scrollbars you’re referring to though.

[Shikkediel]

I was wondering, @beverleyh, does that syntax trigger momentum scrolling? Still not having a touch device that supports nested overflowing elements (old Android), I can’t test it myself but I read on one of Chris’ pages that inertia can only be activated when the overflow is set to scroll (which isn’t handy at all because it creates a persistent scrollbar)…

[Beverleyh]

The momentum scrolling is present in this case even with overflow:auto; Maybe something changed in later iOS?

[Shikkediel]

Okay, thanks. I’ll try to get to the bottom of that. Here’s the article I was referring too by the way, notice the comment:

momentum-scrolling-on-ios

Edit – here’s a clue I hadn’t noticed before.

[Beverleyh]

Thanks for the link. Some of the comments about iPad seem a bit discouraging but I’ll check there once I get home (just finishing up my visit at pop’s house – currently on mobile).

[Shikkediel]

Yeah, not sure what allround approach to take with this. Seems quite impossible to test all actual versions of iOS (which apparently has the most issues). From threads I’ve recently superficially come across, there also seems to be a bug in iOS9 where it completely disables scrolling. Any feedback on this would be much appreciated. Bit of in the dark without any Apple-ish device myself.

[Beverleyh]

Yep – the momentum scroll works fine with overflow:auto; on iPad mini. Will check on an old iPad 1 at the office tomorrow.

[Shikkediel]

Thanks, could you then maybe add what version iOS the devices are runnning? So far I’m concluding scroll would only be necessary for iOS5 and Android 3.0 (below that no overflow support on nested elements).

Might have saved me a bit of trouble adding scrollbars classes with JS…

[Shikkediel]

old iPad 1

Any chance they’re selling one at a reasonable price? :-D
It, or an iPod touch 3G would be suitable devices for backward testing. Both being limited to iOS5. Bearhead shared a link that provided some good insight. I suspect overflow: auto might not trigger overflow-scrolling on these older devices. But scrolling in itself should still be possible, so I guess there would be no need for overflow: scroll just to support inertia on the older OS.

https://david-smith.org/iosversionstats/

bug in iOS9 where it completely disables scrolling

That was iOS8 apparently and only under certain circumstances (parent with 3d transform).

[nbrylev]

Does anybody faced with the same problem as topic author (https://www.youtube.com/watch?v=9h_fjEDDwlc) but with native scrolls?

[alfrex92]

Shikkediel I appreciate a lot that you answer this question.

Thanks to your code, I was able to fix it!

let fixed = document.getElementById(‘navbarhp’);
fixed.addEventListener(‘touchmove’, function (e) {

    e.preventDefault();

  }, false); 

Before watching your post, I spend around 3 hours trying to fix it.

Best regards from Tokyo.

[Author]

Posts