CSS Положение фиксированного потомка в преобразованном родителе с переполнением-y auto, дочерний элемент перемещается при прокрутке родителя

Question

Я пытаюсь использовать псевдо-элемент после, чтобы создать градиент в конце элемента div, чтобы указать, что он прокручивается. Использование transform: translateZ(0); на элементе div позволяет элементу psuedo использовать position: fixed; для закрепления в нижней части элемента. Однако, как только вы начнете прокручивать, псевдоэлемент прокручивается вверх вместе с содержимым div. Возможно ли, чтобы этот элемент придерживался нижней части этого элемента во время прокрутки (кроме использования position: sticky;, которого я избегаю по причинам поддержки браузера)?

Вот скрипка того, что у меня есть сейчас: https://jsfiddle.net/ebL485q9/2/

Спасибо!

Answer 1

Один из способов добиться этого - заключить прокручиваемый контент в другой контейнер div и изменить положение градиента с фиксированного на абсолютное. Примените ваши изменения максимальной высоты к внешнему контейнеру. Таким образом, ваш внешний контейнер управляет открытием и закрытием, а внутренний контейнер всегда остается с фиксированной высотой.

Обновленная скрипка здесь:

https://jsfiddle.net/pv72xbog/

Надеюсь, это поможет. Приветствия.