Думали, научились отличать
overflow: scroll от overflow: auto и всё на этом? Не, так не пойдёт. И дело даже не в том, что у нас есть ещё
visible и hidden. Дело в том, что у нас есть clip! И вот тут-то и начинается самое интересное.Когда придумывали
hidden, задача была простая: скрыть всё, что не помещается в контейнер, чтобы посетителю не пришлось скроллить. Вообще.Но тут у нас появились усложнения процесса скролла:
position: sticky и ScrollAnimation API. И с обоими есть проблемы.Видите ли, согласно спецификации
overflow: hidden создаёт инстанс скролла (контейнер), который буквально перехватывает взаимозействие пользователя с ним, но при этом — позволяет обратиться скриптом к модели и подвинуть контейнер куда надо. Подробнее есть у Брамуса: тык.А что это значит для нас, как пользователей? Что ни
sticky, ни таймлайн-анимации, определённые в CSS, работать не будут, потому что hidden сломает механизм поиска ближайшего доступного скролла.А ещё, браузер буквально не даст вам адекватно настроить индивидуальное скрытие по осям, он всегда выставит auto на вторую ось, что приведёт к скроллу.
И тут на помощь приходит
clip! Он не создаст скролл-контейнер и позволит браузеру правильно обрезать и анимировать элемент, а пользователю — с ним провзаимодействовать.Вообще, описывать это словами довольно сложно. Потому я очень рекомендую почитать интерактивную статью Ахмада Шадида: https://ishadeed.com/article/overflow-clip/
Самый говорящий пример из неё вынесен в иллюстрацию к посту.