Мой дисплей и размер окна имеет ширину 1440 пикселей, но скроллбар забирает собой пару десяток пикселев, а тег body имеет ширину менее 1440 пикселей. Однако, когда скроллбар исчезает (появляется боковая панель в моем случае), ширина body возвращается 1440 пикселей. Как я могу сделать body на полной ширину? Или сделать скроллбар поверх body?
2 ответа
Скроллбар, его внешний вид, цвет, ширина, высота и пр. полностью зависят от браузера. Следующие стили помогут вам изменить эти значения, но это не будет 100% работать у всех пользователей во всех браузерах.
Документация на скролл бар:
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
Итак, следующие стили помогут вам стилизовать ваш скролбар:
:root {
scrollbar-color: #7E6DF1 #fff;
scrollbar-width: thin;
}
* {
scrollbar-width: thin
}
::-webkit-scrollbar {
width: .3125rem;
height: .3125rem
}
::-webkit-scrollbar-thumb {
height: 3.125rem
}
::-webkit-scrollbar-thumb {
background: #7E6DF1
}
::-webkit-scrollbar-thumb:window-inactive {
background: #7E6DF1
}
::-webkit-scrollbar-track-piece {
background-color: #fff
}
Однако этого недостаточно, чтобы сделать скроллбар "абсолютным", то есть чтобы он не занимал места на веб-странице. Чтобы body занял всю ширину страницы, вам необходимо убрать для него margin и указать overflow-y:
html{
overflow-y: overlay;
}
body{
margin: 0;
}
Это сделает ширину вашего body равной ширине экрана.
Вы можете использовать overflow-y: overlay;
для body
чтобы он выходил за рамки скролбара и всегда имел 100% всей ширины экрана.
body {
margin: 0;
width: 100%;
min-height: 101vh;
overflow-y: overlay;
background-color: gray;
}