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

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

Рет қаралды 47,382

Александр Ламков — Friendly Frontend

Ай бұрын

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

Пікірлер: 113

@AleksanderLamkov Ай бұрын

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

@alikhanzakonov5575 Ай бұрын

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

@dowellkin Ай бұрын

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

@CaiN805 Ай бұрын

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

@user-dy7fj6xn3q Ай бұрын

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

@virtuoz-ru Ай бұрын

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

@placid3495 Ай бұрын

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

@Sashad2003 Ай бұрын

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

@Virisound Ай бұрын

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

@biscvie Ай бұрын

Спасибо!

@marhunter1698 Ай бұрын

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

@kalts_daniil Ай бұрын

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

@ivan4486 Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@user-ej6je7en1k Ай бұрын

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

@user-ox4si9xx2x Ай бұрын

Спасибо ❤

@DraginAnatoliy Ай бұрын

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

@user-xy9zd1bt1i Ай бұрын

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

@vehiclesport662 Ай бұрын

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

@NeGovoriNet Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@Barahten2010 Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@radislaw 29 күн бұрын

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

@AleksanderLamkov 29 күн бұрын

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

@radislaw 29 күн бұрын

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

@AleksanderLamkov 29 күн бұрын

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

@qurnosov_live Ай бұрын

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

@nepcz Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@mvcxnm Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@user-oi1ui9rm7x Ай бұрын

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

@kyleundefine1867 Ай бұрын

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

@arthur_adams Ай бұрын

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

@kalts_daniil Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@tymurkr Ай бұрын

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

@VitaliyHAN Ай бұрын

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

@user-yo2yg5zx9e Ай бұрын

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

@yatush3093 Ай бұрын

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

@user-ws2fq7qp2m Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@jekaagramakov3920 Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@danilka6295 Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@un_defined Ай бұрын

супадупа

@bubblesort6368 Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@bubblesort6368 Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@miv2179 Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@miv2179 Ай бұрын

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

@dimenuendo Ай бұрын

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

@user-uc6bu5bf3j Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@ONM-Remont Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@Avdeev-Creator Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@Avdeev-Creator Ай бұрын

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

@CoderWho-qh8fv Ай бұрын

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

@kyleundefine1867 Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@kyleundefine1867 Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@kyleundefine1867 Ай бұрын

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

@user-gz3wu1on9z Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@user-gz3wu1on9z Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@user-gz3wu1on9z Ай бұрын

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

@mr_Panda Ай бұрын

чО !?

@user-pt2uz5st7i Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@user-ew7dq9kw9n Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@ddrdeveloper 29 күн бұрын

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

@AleksanderLamkov 29 күн бұрын

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

@ddrdeveloper 29 күн бұрын

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

@AleksanderLamkov 29 күн бұрын

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

@AleksanderLamkov 29 күн бұрын

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

@ddrdeveloper 29 күн бұрын

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

@dmitry6349 Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@dmitry6349 Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@dmitry6349 Ай бұрын

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

@user-ej6je7en1k Ай бұрын

не работает

@AleksanderLamkov Ай бұрын

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

@amphetyze Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@wt8712 Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@avatar33311111111111 Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@illiapotapov9939 Ай бұрын

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

@ilovecameltoe Ай бұрын

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

@AleksanderLamkov Ай бұрын

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

@artemj1 Ай бұрын

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

@AleksanderLamkov Ай бұрын

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