CSS Position fixed child in a transformed parent with overflow-y auto, child moves when scrolling parent

I'm trying to use a pseudo after element to create a gradient at the end of a div to indicate that it's scrollable. Using transform: translateZ(0); on the div allows the psuedo element to use position: fixed; to be stuck to the bottom of the element. However, once you start scrolling, the pseudo element scrolls up along with the content of the div. Is it possible to have this element stick to the bottom of this div while scrolling (aside from using position: sticky; which i'm avoiding for browser support reasons)?

Here's a fiddle of what I've got right now: https://jsfiddle.net/ebL485q9/2/

Thanks!

1 answer

  • answered 2018-11-08 01:33 Gurtej Singh

    One way to achieve this would be to wrap your scrollable content inside another container div and change the position for your gradient from fixed to absolute. Apply your max-height changes to the outer container. That way, your outer container controls the open and close and the inner container always remains with a fixed height.

    Updated fiddle here:

    https://jsfiddle.net/pv72xbog/

    Hope this helps. Cheers.