Как в мобильной версии Google реализовано градиентное скрытие содержимого за пределами блока?

Question

[Рома Зварич]

Здравствуйте.

В мобильной версии поиска Google закладки, которые не помещаются на экране, оформлены в виде постепенного скрытия, что даёт понять, что за пределами блока есть еще другие.

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

Comments

[Кирилл]

overflow: hidden и карусель как вариант

Answer 1

[tyzberd]

как то так https://codepen.io/anon/pen/yjWEWV/
только смотрите с тачем

Comments

[Рома Зварич]

Пример вроде представляет из себя вытащенный из сайта код.
Но благодаря Вашему примеру, нашел div с классом .P1Ycoe, на основе которого всё это и делается.
Просто не думал, что он так высоко в дереве может быть.
Спасибо

Answer 2

[Антон]

Вычислить ширину блока, вычислить ширину экрана. Если ширина блока выше ширины экрана, тогда вешать необходимое, будто то скролл, оверфлоу или инициализация слайдера