CSS Фикс скачка ширины страницы при открытой модалке - свойство scrollbar-gutter

🗂️ Смотри бесплатные курсы по фронтенд-разработке на канале:
🟠 Курс по HTML
🔵 Курс по CSS
🟡 Курс по JS
🟢 Курс Accessibility
⚪️ Мастер-класс по верстке для новичков
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS)
💬 Чат в телеграмме (помощь новичкам):
@friendlyFrontendChat
#shorts #frontend #фронтенд #css

[@AleksanderLamkov]

📌 Друзья, в телеграмме у нас есть канал и отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 Чат: @friendlyFrontendChat ℹ Основной канал: @friendlyFrontend Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

[@user-dy7fj6xn3q]

Полезная инфа, попробую на проекте, спасибо))

[@alikhanzakonov5575]

Жаль только область скролбара не затемняется вместе с остальными элементами

[@dowellkin]

Полагаю бэкдропу можно задать right: -20px

[@CaiN805]

Прекрасно! Думал это невозможно исправить! Ладно в мозилле или сафари, но в хроме километровая ширина прокрутки😂 спасибо большое, очень помог!

[@Sashad2003]

Спасибо за полезную инфу!

[@placid3495]

С каждым новым твоим шортсом все больше полезного узнаю! Спасибо!

[@virtuoz-ru]

Знал об этом, но не знал как применять 😂. Спасибо, теперь знаю 👍

[@Virisound]

Круто, норм инфа. 👍

[@yelstofs6117]

Спасибо!

[@kalts_daniil]

Я всю жизнь с этим страдал, а тут одно свойство оказывается 😂 Я когда использовал выпадающее меню для мобильных устройств, ставил для body: overflow-y: hidden. Но если на компьютере сузить экран, то там скакала ширина, потому что это не touch устройство. Спасибо!)

[@user-ej6je7en1k]

Эт оч полезно. Подписался.

[@user-ox4si9xx2x]

Спасибо ❤

[@marhunter1698]

Всегда знал что где то было это свойство

[@ivan4486]

Ну тоже не панацея - оно вставляет заглушку вместо скролбара, не совпадающую по цвету с сайтом. Смотрится на мой взгляд даже хуже чем сдвиг разметки.

[@AleksanderLamkov]

Где-то в комментариях ниже оставлял ссылку на кодпен, где этой проблемы нет. Нужна лишь доп. обертка для контента.

[@mvcxnm]

а в чем проблема сделать оверлей отдельным блоком, который будет перекрывать весь контент страницы? Тогда, даже не прописывая overflow hidden, страница не будет реагировать на скролл

[@AleksanderLamkov]

Набросай код в песочнице и скинь сюда или в чат t.me/friendlyFrontend, пожалуйста. Пока не совсем понятна твоя идея.

[@vehiclesport662]

Спасибо, огромный опыт...)

[@DraginAnatoliy]

Боже мой, дождались, спасибо... если бы не ты я бы до сих пор мучался с этим

[@user-xy9zd1bt1i]

на css наверно всю вселенную скоро опишут

[@qurnosov_live]

Пойду bootstrap установлю и не буду изобретать велосипед. А вам ещё поведение на ESC надо наладить, поведение при клике за пределами окна, клик по крестику, клик по кнопке отмена. Ну и адаптивность неплохо сделать

[@Barahten2010]

Эта фишка работает когда страница имеет свою собственную прокрутку. В случае когда все умещается в пределах одного экрана, т.е. не имеет прокрутки, то будет некрасивый желоб, который как бы зарезервирован этим css правилом

[@AleksanderLamkov]

Да, но лечится такой схемой: codepen.io/aleksander-lamkov/pen/rNbEemq

[@radislaw]

@@AleksanderLamkov а нафига тогда это свойство, если все равно тот же костыль нужно применять?

[@AleksanderLamkov]

Без scrollbar-gutter скроллбар при открытии модалки будет некрасиво смещаться.

[@radislaw]

@@AleksanderLamkov Попробуйте закомментировать это свойство в вашем codepen

[@AleksanderLamkov]

Окей, действительно, ничего не меняется. В таком случае либо делать доп. обёртку над контентом, как в кодпене выше, либо scrollbar-gutter вешать на html {} и терпеть вертикальную незатемненную линию вместо скроллбара при открытии модалки.

[@tymurkr]

По моему легче вообще убрать скролбар, или попытаться сделать как на смартфонах, потому что все равно белая полоска все портит.

[@user-yo2yg5zx9e]

Было дело, юзал костыли😢

[@kalts_daniil]

Саша, а ты добавишь этот стиль в свою сборку normalize.css?

[@AleksanderLamkov]

Думаю да, хорошая идея, спасибо!

[@VitaliyHAN]

Произносится как «гаттер»

[@user-oi1ui9rm7x]

Спасибо, классная штука. Только fixed - хедер все-таки дергается.

[@kyleundefine1867]

а там надо вюпорт задавать по ширине на не 100% и с компенсацией падинга как диз попросит....

[@arthur_adams]

Гюнтер и пудинг))

[@nepcz]

Не знаю как вам, но когда я зашел на caniuse прокрутив в голове слова "можно использовать в продакшен" и увидев поддержку браузеров, мне сразу вспомнился мем, где чел сидит за столом с тарелкой и всё выплевывает изо рта с афигевшим взглядом.

[@AleksanderLamkov]

Привет! Поддержка "плохая" из-за Safari, но есть нюанс. Его в расчёт не нужно брать. Ни на iOS, ни на MacOS скроллбара как такового нет и, соответственно, проблемы "прыгающего" скроллбара там нет. Так что смело повторю свои слова: да, можно использовать в продакшене.

[@NeGovoriNet]

ВОт только на месте скролбара белое поле. Так что пока не идеально

[@AleksanderLamkov]

Нашел решение. Нужна лишь дополнительная обертка :) См.: codepen.io/aleksander-lamkov/pen/rNbEemq

[@miv2179]

Учу htm, jsl и css и у меня почему-то не работает overflow: hidden; при открытии модального окна. Не подскажешь в чём может быть проблема?

[@AleksanderLamkov]

Привет! Может не на тот элемент вешаешь свойство? Попробуй на и одновременно.

[@miv2179]

@@AleksanderLamkov спасибо все заработала. Не в тот элемент ставил overflow

[@un_defined]

супадупа

[@danilka6295]

77% - плохая поддержка для продакшена, максимум для каких-то мелких проектов

[@AleksanderLamkov]

Поддержка лучше, чем кажется. Safari можно не учитывать вовсе, там скроллбара типичного нет.

[@yatush3093]

Даже ютуб не просёк

[@user-ws2fq7qp2m]

можно и задать контейнеру width = 100vw)

[@AleksanderLamkov]

Увы, это не спасёт от "скачка" :(

[@jekaagramakov3920]

у вас есть обучалки по Реакт?)

[@AleksanderLamkov]

Привет! Пока нет. Последний курс на канале про JS и он всё ещё в процессе.

[@dimenuendo]

есть способ лучше: scrollbar-width: none; ВСЁ {нетСкроллбара === нетПроблемы}

[@bubblesort6368]

Но все равно ведь справа пустое место под от скрол бара остается. Тоже смотрится спорно. Не знаю что лучше) скрол или яма)

[@AleksanderLamkov]

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

[@bubblesort6368]

@@AleksanderLamkov возможно, но большинство сайтов имеют белый фон и например в области хедера яма все равно будет видна(

[@AleksanderLamkov]

Эх. Как обычно во фронтенд-разработке - «серебряной пули» не существует, довольствуемся чем имеем и допиливаем всё костылями 🥲

[@user-uc6bu5bf3j]

Нет проблема не решилась, теперь там просто пустое пространство, визуально выглядит как сломанное поведение а поддержка браузеров в 76 процентов делает как минимум не используемым в настоящее время)

[@AleksanderLamkov]

Пустое пространство - это цвет body, бросается в глаза только, если страница в изначально светлых тонах, что контрастирует с бэкдропом. Поддержка на самом деле неплохая, ибо сафари в расчет можно не брать, там проблемы скроллбаров нет.

[@CoderWho-qh8fv]

гютер - это по-немецки? 😂

[@user-gz3wu1on9z]

Увы, проблема не решена. На фиксированных элементах не работает

[@AleksanderLamkov]

Можешь развернуть свой тезис? На каких таких элементах? Базовый сценарий с манипуляцией скроллбара для всей страницы при открытии модалки работает отлично.

[@user-gz3wu1on9z]

@@AleksanderLamkov Фиксируешь шапку при спролле. Фиксируешь, например, проявляемую кнопку вверх при скролле. Все они, при открытии модалки, так же смещаются на размер скроллбара.

[@AleksanderLamkov]

Проверил у себя. И правда, баг такой есть. При том, что после первого открытия модального окна и его закрытия скачка уже не будет (уже пришло в голову решение - эмулируем автоматическое первое открытие модалки при прогрузке сайта в первые доли секунды, но что-то это костыль). Ну, для сайтов без фиксированно позиционированной шапки, scrollbar-gutter будет точно не лишним :)

[@user-gz3wu1on9z]

@@AleksanderLamkov Да, фича приятная. Хочется верить что докрутят

[@Avdeev-Creator]

Вроде круто, но справа пустая полоска..., без затемнения

[@AleksanderLamkov]

Привет! Нашел решение. Нужна лишь дополнительная обертка. См.: codepen.io/aleksander-lamkov/pen/rNbEemq

[@Avdeev-Creator]

@@AleksanderLamkov а это уже мега круть) пасиб

[@kyleundefine1867]

а с сафари как дела обстоят?

[@AleksanderLamkov]

Не поддерживает. Но для сафари это и не нужно, там ведь нет такой проблемы со скроллбаром :)

[@kyleundefine1867]

@@AleksanderLamkov у меня мак и тут есть этот эффект, разница в настройке виртуальго скролбара. как только подключается внешняя мышь скролбар становится физическим. и где в настройках это можно настраивать, но раз это можно настраивать значит проблема пока еще есть. если интересно то могу показать пруфы)

[@AleksanderLamkov]

Да, есть такая настройка. Но большинство юзеров сафари все же живут без скроллбаров)

[@kyleundefine1867]

но и проблема там тоже остаётся) просто процент юзеров маленький, но везде где бы я не работал прилетает претензия с этим вопросом, так как есть манагер или диз на маке которые фефекают) а мы им ну лады давай го в спринт оценим проревьим тестируем и тд))

[@ONM-Remont]

А высота меняется?

[@AleksanderLamkov]

Должна, свойство и на горизонтальный скроллбар действует.

[@ddrdeveloper]

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

[@AleksanderLamkov]

В комментариях ниже скидывал ссылку на доработанное решение без описанной тобою проблемы: codepen.io/aleksander-lamkov/pen/rNbEemq

[@ddrdeveloper]

@@AleksanderLamkov Ну, в принципе, неплохо, но, опять же, БЕЗ JS, есть, как минимум, еще одно решение. интересно, сможешь реализовать?

[@AleksanderLamkov]

Компонент модального окна без JS не сделать. Даже используя придется писать инлайновый onclick обработчик для кнопки открытия.

[@AleksanderLamkov]

А если ты намекаешь на решение через якорную ссылку, то ну оно уж точно кривое и «залочить» скролл в таком решении реализовать уж точно не получится.

[@ddrdeveloper]

@@AleksanderLamkov Это понятно, я имею ввиду ТОЛЬКО скролл

[@mr_Panda]

чО !?

[@user-ew7dq9kw9n]

Поддержка не очень

[@AleksanderLamkov]

Safari можно не брать в расчёт. На MacOS по умолчанию скроллбаров и, соответственно, проблем с ними нет.

[@user-pt2uz5st7i]

В сафари на практике кто проверя?

[@AleksanderLamkov]

На устройствах с сафари по дефолту скроллбар отображается поверх интерфейса страницы и потому проблем с ним не наблюдается.

[@user-ej6je7en1k]

не работает

[@AleksanderLamkov]

В каком браузере и какой версии?

[@wt8712]

Проблема решена! Так же не перекрытый затемнением отступ справа:

[@AleksanderLamkov]

На сайтах с темным фоном на body эта проблема не будет так сильно бросаться в глаза :)

[@AleksanderLamkov]

Нашел решение. Нужна лишь дополнительная обертка. См.: codepen.io/aleksander-lamkov/pen/rNbEemq

[@illiapotapov9939]

Загуглить произношение английского слова - 5 секунд...

[@ilovecameltoe]

где прекрасная поддержка? в safari еще не работает ни в какой версии.

[@AleksanderLamkov]

В Safari скроллбара у большинства юзеров нет и проблем с ним соответственно тоже, так что да, повторюсь, поддержка отличная.

[@dmitry6349]

«прекрасная поддержка» это 76% и на яблоках не работает вообще, такой себе совет

[@AleksanderLamkov]

На iOS и MacOS как правило привычного юзерам винды скорллбара нет и проблем с ним тоже. Так что да, повторю свои слова - поддержка отличная.

[@dmitry6349]

@@AleksanderLamkov ​​⁠это выдуманные вами факты, «как правило на маках нет привычного скроллбара как у винды», а у меня мак и у меня есть, и у моего ПМ с маком они есть, и такие аргументы не прокатят на реальном проекте. Вот как завезут поддержку так и можно использовать будет, а пока годится только джунам в шортс показать за лайк)

[@AleksanderLamkov]

Я пользуюсь iOS 10 лет и MacOS 3 года. Скроллбара, при использовании девайсов с этими ОС без мыши, не было и нет. Он всегда рендерится поверх страницы и отображается лишь при взаимодействии со скроллом.

[@AleksanderLamkov]

На реальном проекте на реальной работе оперируют понятием «прогрессивное улучшение» и подобная фича, показанная в моем видео, отлично ложится на эту концепцию 🙃

[@dmitry6349]

@@AleksanderLamkov в настройках системы это легко изменить, если вы пользуетесь дефолтными настройками это не значит что ими пользуются все.

[@avatar33311111111111]

На самом деле, поддержка этого свойства на данный момент, очень слабая. По: can i use - всего 76%.

[@AleksanderLamkov]

Но Safari можно не учитывать, на iOS и MacOS по умолчанию классических скроллбаров нет.

[@amphetyze]

соскуфился сашка

[@AleksanderLamkov]

Да эт освещение неудачное, чесслово) Светотень решает

[@artemj1]

Врете про поддержку, это не работает на маках с мышкой.

[@AleksanderLamkov]

Я не думаю, что процент пользователей Safari на MacOS с мышью большой. Такую тонкую статистику в открытом доступе не нашел, но я в реальной жизни вижу тысячи маководов вокруг, ну а мышь видел лишь в рекламных роликах от Apple пятнадцатилетней давности. Маководы в большинстве своем юзают трекпады и проблем со скроллбарами не испытывают, поэтому да, повторюсь, поддержка, на мой взгляд, отличная.

[@biscvie]

Спасибо!