scrollbar-gutter
- при переполнении блока с
overflow: scroll;илиoverflow: auto;, сдвинув содержимое, появится полоса прокрутки - для полосы прокрутки зарезервировано место с одной стороны
- для полосы прокрутки зарезервировано место с обеих сторон
- auto
- наследует значение родителя
- auto
Нажать
Папа у Васи силён в математике,
Учится папа за Васю весь год.
Где это видано, где это слыхано, —
Папа решает, а Вася сдаёт?!
<style>
div {
height: 6em;
border: 1px solid darkgray;
overflow: auto;
scrollbar-gutter: auto; /* свойство scrollbar-gutter не наследуется, применяется к scrolling boxes */
}
</style>
<div>Содержимое</div>
Если сайт размещён по центру окна браузера (содержимое ограничено зелёными линиями), то при переходе с короткой страницы на длинную, контент дёргается влево на небольшое расстояние, равное ширине вертикальной полосы прокрутки (scrollbar). В приведенном ниже примере нужно нажать на ссылку «Яблоко».
<style>
header, main, footer {
max-width: 500px;
margin: 0 auto;
padding: 0 1em;
border-left: solid darkseagreen;
border-right: solid darkseagreen;
box-sizing: border-box;
}
</style>
<main><a href='#'>Ссылка</a> …</main>
Чтобы сайт не сдвигался, можно полосу прокрутки добавить на все страницы сайта. Там, где она не нужна, scrollbar окрашен в серый неактивный цвет.
<style>
html {
overflow-y: scroll;
}
header, main, footer {
max-width: 500px;
margin: 0 auto;
padding: 0 1em;
border-left: solid darkseagreen;
border-right: solid darkseagreen;
box-sizing: border-box;
}
</style>
<main><a href='#'>Ссылка</a> …</main>
<style>
@media screen and (min-width: 500px) { /* если окно браузера больше максимальной ширины сайта */
html {
scrollbar-gutter: stable both-edges;
}
}
header, main, footer {
max-width: 500px;
margin: 0 auto;
padding: 0 1em;
border-left: solid darkseagreen;
border-right: solid darkseagreen;
box-sizing: border-box;
}
</style>
<main><a href='#'>Ссылка</a> …</main>