Now the animation works as expected and your elements no longer overflow. Select the next parent up in the hierarchy (e.g., “Hero Section”).Set the Div block’s Overflow to visible.Select the Heading’s parent element (e.g., “Hero container” Div block).To make sure the animation still functions as you had intended, you can remove Overflow: hidden on the Div block and instead set Overflow: hidden on the next parent up in the element hierarchy - the Section: Fix this by setting Overflow: hidden on the next parent up in the element hierarchy. Note: If you're using a trackpad or a mobile device, scroll left and right - but if you’re using a mouse wheel, you can generally hold down Shift to scroll left and right.Īn interaction is clipped because the incorrect parent element was set to Overflow: hidden. Resize the canvas to check for responsiveness and fluidity.Scroll left and right to see if any elements overflow outside the viewport.To detect in the Designer whether your project might exhibit unwanted horizontal scrolling: You can check for this in the Designer and the published site. In other words, look for extra space or elements hanging off the edge of your design’s boundary as you scroll. However, when testing for unwanted horizontal scrolling, be on the lookout for anything that makes your layout look or feel like the boundary (usually the right side of your design) isn't functioning as you would like.
Horizontal scrolling isn’t always a bad thing. 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:
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.