Вам потрібно сховати все, що виходить за межі батьківського контейнера. Задача проста як двері і стара як світ, тож ми беремо
overflow: hidden і завершуємо цей допис. Правда?ПРАВДА?
Нуууу, можливо. Річ у тому, що з
overflow: hidden у елемента залишається контекст прокрутки, тобто його вміст можна скролити. Так, вказівником чи тачпадом у вас не вийде прокрутити контент, але на рівні DOM API ця можливість лишається. Тобто за допомогою JS можна змінити scrollTop чи scrollLeft. Цю особливість, до речі, використовують безліч бібліотек для кастомних скролбарів.Але що як нам треба обрізати вміст наглухо? Тут в нагоді стане таке значення властивості
overflow, як clip. Іззовні воно працює так само, як і hidden, але з однією суттєвою відмінністю — у контейнера зникає той самий контекст прокрутки. І навіть за допомогою JS скролити його не вийде, значення scrollTop та scrollLeft залишатимуться нулями, навіть якщо ви спробуєте їх змінити. Тому такий елемент не є скрол-контейнером.Вигоди
overflow: clip можуть бути не очевидні на перший погляд, але hidden насправді приховує немалу кількість багів, повʼязаних зі скрол-контекстом, а також кілька витребеньок, які багами не є, але дратують суттєво.Візьмемо, до прикладу,
position: sticky. Зазвичай він приклеюється до найближчого scroll-context, і якщо такий елемент лежить у вас в контейнері з overflow: hidden, то й приклеюватися він буде до нього, а не до вʼюпорту, як би нам того хотілося.Однак, якщо використати
overflow: clip, то sticky-елемент привʼяжеться до найближчого скрол-контексту, а не до свого батька, бо у нього цього контексту немає. Тож, якщо ви хочете, щоб глибоко вкладені елементи правильно прилипали до верхнього краю вʼюпорту, наприклад, то краще використовувати overflow: clip.Побачити та побачитися з цією поведінкою можна ось тут:
🌐 CodePen: hidden vs clip
До речі, у
overflow: clip є властивість-компаньйон. Щоправда, ще не доступна в Firefox. Мова про overflow-clip-margin, яка дозволяє задати, наскільки вміст може "вилазити" за межі контейнера. Але є нюанс — ви не можете виставити значення окремим сторонам, лише один відступ для всіх сторін. Це так, до слова.Якщо дізналися щось нове, прошу поставити вподобайку та поширити цей допис. А навіть якщо й не дізналися, серденько чи вогник від вас зайвими точно не будуть.
📖 MDN: overflow clip
📖 Web Dev: overflow
📖 W3C CSS Overflow Module Level 3 — clip
До речі, можливо вам уже спало не думку, яких багів чи непердбачуваної поведінки можна уникнути з
overflow: clip? Поділіться в коментарях!✍️ @babichdev