Как сделать размытие текста внизу блока без позиционирования?

Question

[corasao]

Все доброго времени суток!
Подскажите, пожалуйста, как реализовать размытие текста внизу блока. Блок имеет фиксированную высоту и overflow:auto для возможности скролить текст?
Ожидаемый результат

Важно! Решить вопрос путем позиционирования не вариант, так как в таком случае в том месте где он будет накладываться на текст - не будет работать скролл для текста колесиком миши ну или пальцем на телефоне. Скролиться будет только скролбаром.
Пробовал box-shadow подобрать - безуспешно.
Идеально выглядит только с позиционированием и background в низ блока с текстом и условной высотой 30%, но, как писал выше, эти 30% тогда не скролятся без скроллбара.

Comments

[Ankhena]

не будет работать скролл для текста колесиком миши ну или пальцем на телефоне

Для этого есть свойство pointer-events: none

А абсолют при желании можно заменить на грид. Но всё равно с pointer-events

[corasao]

Ankhena, спасибо большое! Точно! pointer-events: none

Answer 1

[Максим]

https://codepen.io/topicstarter/pen/bGmGEaL - проверьте как, на каких там устройствах не будет работать scroll ?

Comments

[corasao]

Конечно работает все! Я упустил pointer-events. Спасибо!