Absolutes - overflow-x:hidden creates vertical scroll

Design help General
1

Hi Webflowers,

This is about positioning absolute elements, preserving vertical scroll but avoiding horisontal.

CONTEXT
As seen here, I have a section with an absolute element in the background. The absolute consists of a wrapper and an HTML embed. With overflow: hidden, the element gets clipped in the section, as shown with the red lines in this image.

Screenshot 2020-02-20 at 10.29.54
Screenshot 2020-02-20 at 10.29.542838×1598 409 KB

PROBLEM
Overflow-x: hidden and overflow-y: visible creates a vertical scrollbar inside the element. This is silly. Reading up on the problem many seem to have encountered the same, but I haven’t come across a good solution.

Screenshot 2020-02-20 at 10.38.50
Screenshot 2020-02-20 at 10.38.502828×1584 452 KB

I’VE TRIED

  • Adding overflow-x: hidden to body instead. This kills stuff like sticky elements and prevents scroll in Safari.
  • Adding overflow-x to sections. Creates vertical scrollbars too

WANTED SOLUTION

  • Overflow-x: hidden
  • Overflow-y: visible
  • No scrollbar in that element
  • Absolute element doesn’t clip inside the section but can freely be moved up and down behind the previous and next section

PREVIEW LINK
Link

1 Like
2

Hey, did you happen to find a fix for this?

3

Wrap the cosmetic element in a div and set that to overflow hidden. Then the cosmetic can be offset inside that without creating overflow