[Solved] How to style element to overlap scroll

by


Demo

https://jsfiddle.net/mg8zbr41/172/

(I hope this was the desired behaviour)

Explanation

The whole problem would have been solved if we were allowed to have overflow-x: auto and overflow-y: visible together. But we cannot do that (see this answer). So we use the following workaround.

  1. If you want to have want the red div to pop out you cannot put
    position: relative parent. So we remove that first
  2. Now bottom becomes relative to parent relative element i.e. body but we don’t want that so we also remove bottom
  3. Now we have top, right, bottom, left all as auto. So the elements placed below the green box as it would have been if it was static. The only difference is it pops out of the bottom box
  4. Now we want it to be 10px above the green box for that we use translateY(calc(100% + 10px) * -1)
  5. Now this works till there’s no scrolling. When the div is scrolled the red box stays there and doesn’t move with its green box, we need to fix that
  6. This can be easily fixed if we know how much is the div scrolled. Suppose the div is scrolled by 100px towards left we’ll shift the red box towards left by 100px
  7. We cannot find scrollLeft without JS. I personally don’t like JS intervention for styling. We cannot avoid it but at least we can make it more semantic by using css variables for communication between JS and CSS.
  8. We use JS to update a --scroll-left css variable on #bottom-div with the scrollLeft value
  9. Once we have --scroll-left we can now add translateX(calc(var(--scroll-left,0px) * -1))
  10. Also we don’t want the red box to pop out of the box horizontally. We cannot fix this by overflow: hidden because that would require position: relative. So we use clip-path: inset(-999px 0px -999px 0px).
  11. Finally we achieved want we wanted. Phew.

Demerits:

  1. Horizontal repositioning will be laggy in Firefox because of Scroll Lined Effects. Same might be the problem in mobile browsers

See also:

https://css-tricks.com/popping-hidden-overflow/ Source of inspiration for my answer but both (solution in the article and my solution) are quite different but same core approach

2

solved How to style element to overlap scroll