CODEWITHSUNDEEP
javascriptcss
Radu Andrei
Radu Andrei

Reputation: 1073

Javascript or CSS to prevent scrolling inside element with overflown content

I have this website that's under development. Inside the body tag, i have two absolute positioned divs, side by side. One is 100% width of the window, the other 80%. They are wrapped by the body tag which is 100% width of the window.

To the body i have added "overflow-x:hidden" to hide the 80% width div and to prevent scrolling on horizontal. So far so good, except that on mobile devices you can touch drag (scroll) to the otherwise unscrollable content (second div). The same thing happens if you mouse wheel scroll right and left (press the middle mouse button and drag the mouse right and left). How could i prevent that scrolling from happening, without making the second element(the 80% width one) 0% width?

Upvotes: 1

Views: 451

Answers (1)

OACDesigns
OACDesigns

Reputation: 2299

This appears to be an issue (dare I say bug) with webkit browsers and the way they handle overflow on a single axis... You may have noticed that firefox isn't affected.

After a bit of experimenting it looks like it may be triggered by the combination of overflow-x:hidden with percentage based heights - see this fiddle, the issue isn't present here initially but if you uncomment the height:100% css and run it again, you'll then notice the issue manifests:

http://jsfiddle.net/OACDesigns/WFkSY/6/

As others have mentioned, I think your best solution at this time is to make use of display:none on the navigation menu element as needed. The alternative would be to rethink how you've structured and styled the layout, and try to do it in such a way that doesn't trigger this bug.

Upvotes: 1

Related Questions