Quantcast
Channel: Злой полицейский
Viewing all articles
Browse latest Browse all 445

Исправляем «прыгающий скролл»на чистом CSS

$
0
0

css-calc

Когда вы центрируете веб-страницу на CSS при помощи margin: 0 auto, появляется один очень неприятный баг: сайт скачет при переходе между короткой и длинной страницами.

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

Классический фикс данной проблемы - всегда отображать вертикальную полосу прокрутки:

[css]
html {
overflow-y: scroll;
}
[/css]

Но с приходом CSS3 подход к решению данной проблемы изменился благодаря применению calc() и новой единицы измерения vm:

[css]
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
[/css]

Подсчёт ширины скроллбара работает только при условии, что для тега <html> установлено значение overflow: auto.

Но тут есть небольшая проблема: если вы используете адаптивный веб-дизайн, то столкнётесь с тем, что margin-left больше чем margin-right, когда страница совсем маленькая.

Пофиксить можно совсем просто - использовать данный подход только на широких экранах (больше 960 пикселей), для чего можно задействовать медиа-выражения в CSS:

[css]
@media screen and (min-width: 960px) {
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
}
[/css]

Данный подход работает в IE9+, Chrome и Firefox, но не работает в Opera и Safari 7.

Ссылки

Запись Исправляем «прыгающий скролл» на чистом CSS впервые появилась на сайте PHP Portal.


Viewing all articles
Browse latest Browse all 445

Trending Articles