Javascript or CSS to prevent scrolling inside element with overflown content -


I have this website which is under development. Inside the body tag, I have two full position divisions, one side. One window has 100% width, the other is 80%. They are wrapped by body tags, which is 100% width of the window.

In the body I added "Overflow-X: Hidden" to hide 80% width and to prevent horizontal scrolling. So far, it is so good that except on mobile devices, you can touch the scroll otherwise without scrolling material (second div). This is what happens if you mouse wheel scroll right and left (press the middle mouse button and drag the mouse left and right). Without the second element (80% width one) 0% width, how can I prevent it from being scrolling?

This is a problem with webkit browser (I have the courage to say bug) and the way they Handle overflow on one axis ... you think Firefox is not affected.

After being a little bit of experimenting, it seems that it can start with a combination of percentage based heights based on the overflow-x: hidden - see, it The issue is not present at the beginning, but if you run height: 100% CSS and after running it again, you will see that this issue appears:

As other people have mentioned, I think your best solution at this time To use the display: none on the navigation menu element, you must reconsider how you have created and styled the structure, and try to do it in this way Which does not trigger this bug.


Comments

Popular posts from this blog

import - Python ImportError: No module named wmi -

Editing Python Class in Shell and SQLAlchemy -

c# - MySQL Parameterized Select Query joining tables issue -