#Overflow hidden scroll how to#

Unwanted horizontal scrolling can be caused by a different scenario than the 2 mentioned above, but layout and animation-related overflow tend to show up the most. The initial position of a Heading with an interaction applied to it starts the Heading off the screen and causes overflow. Even though the Heading ends up in the right spot after the animation has completed, its initial position causes the page to have overflow. When the page loads, the initial position of the Heading might be off the screen.

For example, you have a Heading flying in from the side. Interaction or animations that start offscreen.The design layout has an element that is sized or positioned in a way that pushes it off the screen and outside the viewport.Many things can cause unwanted horizontal scrolling in your design, but generally it's caused by 1 of 2 things:

#Overflow hidden scroll how to#

Not all horizontal scrolling is a bad thing, but if it’s something that doesn’t work with your design, we’ll walk you through how to stop it using Overflow: hidden, responsive design, and mindful interaction setup. Sometimes elements on a page can exist outside the viewport, and an unintended side effect can be horizontal or sideways scrolling that shows extra whitespace around your design.