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