Тени для подскролла через Scroll-Driven анимации

Часто в интерфейсах встречается такой приём: если есть скролл на внутреннем элементе страницы, то чтобы пользователь на устройствах с невидимым скроллом осознал его наличие, рисуют тень. Раньше-то всё просто было: показывается здоровенная колбасина скролла на карусельке — значит, тут можно подскроллить. А теперь скролл на мобилках сам прячется, на macOS и разных линуксах — тоже, нужно пользователям как-то намекать, что блок не обрезан, а скроллится.

Такой приём требует понимания, когда показывать тень. Обычно для этого используется простенький JS-скрипт, который проверяет позицию скролла. Кевин Хеймер же предлагает использовать исключительно CSS и относительно новое свойство animation-timeline. Например, можно завести кастомное свойство --left-fade для левой горизонтальной тени, а внутри анимации, привязанной к скроллу, менять его значение на что-то, что показывает или прячет тень. Привязаться к скроллу можно так:

.scrollable {
  overflow-x: scroll;
  animation: scrollfade;
  animation-timeline: --scrollfade;
  scroll-timeline: --scrollfade x;
}

У автора статьи пример с маской и точкой остановки цвета в градиенте, но я бы попробовал менять прозрачность нарисованного градиента. Или translateX на худой конец. В общем, вариаций может быть много, главное научиться привязываться к позиции скролла.

https://css-tricks.com/modern-scroll-shadows-using-scroll-driven-animations/