Як часто ви помічали стрибок лейауту, коли на сторінці зʼявляється чи зникає скролбар? Це особливо помітно, коли ви показуєте кастомну модалку і при цьому блокуєте прокрутку body через
overflow: hidden (а мали б через clip).Ця проблема існує ще з тих часів, відколи існують веб-сторінки. І вирішити її намагалися багатьма способами, часто безуспішно, хоча з появою CSS-змінних в парі з відносними вʼюпорт одиницями вимірювання це стало робити дещо легше.
Але чим мені й подобається CSS, це тим, що рано чи пізно в ньому усе ж зʼявляються рішення для поширених проблем. Зокрема тепер ми маємо властивість
scrollbar-gutter, яка дозволяє "зарезервувати" місце під скролбар до його фактичної появи.На відміну від
overflow-y: scroll, gutter саме резервує місце, не відображаючи нічого, поки не зʼявиться потреба показати реальний скролбар.У цієї властивості є два ключових значення, які дозволяють керувати її поведінкою:
—
stable: резервує місце під скролбар з одного боку, в нашому випадку — з правого;—
both-edges: будучи доданим до stable, резервує місце з обох боків, врівноважуючи таким чином макет і зберігаючи центроване розміщення вмісту сторінки відносно вʼюпорту.Без вподобайки я не дозволяю читати далі.
Є, щоправда, кілька недоліків, які варто зазначити. Найбільший із них: в Chromium зараз існує баг, коли правий відступ з
both-edges залишається видимим навіть при видимому скролбарі. В Firefox усе працює чудово.Також gutter ніяк не стилізується, він завжди прозорий, тож крізь нього буде видно тло батьківського елементу. А якщо застосувати gutter до елементу html, то ви отримаєте просто пусте місце, на яке ви взагалі ніяк не вплинете. Because fuck you, that's why.
Іншим застереженням є те, що
scrollbar-gutter працює тільки з класичними "цільними" скролбарами. Якщо у вас скролбари overlay, то й сенсу задавати gutter немає.І ще треба враховувати, що gutter має ширину системного скролбару, і змінити його розмір можна лише за допомогою
scrollbar-width. Але, на жаль, ця властивість не дозволяє задати бажаний розмір в пікселях, лише з переліку auto, thin та none.📖 MDN: scrollbar-gutter
Тож якщо у вас досі є костилі з
padding: calc(100vw - 100%) або завжди ввімкнений overflow-y: scroll — спробуйте замінити їх на scrollbar-gutter. Це той випадок, коли CSS знову пропонує нам однорядкове рішення проблеми, якій вже більше років, ніж багатьом моїм читачам.@babichev