0

Мой дисплей и размер окна имеет ширину 1440 пикселей, но скроллбар забирает собой пару десяток пикселев, а тег body имеет ширину менее 1440 пикселей. Однако, когда скроллбар исчезает (появляется боковая панель в моем случае), ширина body возвращается 1440 пикселей. Как я могу сделать body на полной ширину? Или сделать скроллбар поверх body?

Ширина обычная(скроллбар отжал место) введите сюда описание изображения

1
  • Так пусть скроллбар остаётся.
    – Qwertiy
    19 июл 2022 в 17:23

2 ответа 2

0

Скроллбар, его внешний вид, цвет, ширина, высота и пр. полностью зависят от браузера. Следующие стили помогут вам изменить эти значения, но это не будет 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 равной ширине экрана.

0

Вы можете использовать overflow-y: overlay; для body чтобы он выходил за рамки скролбара и всегда имел 100% всей ширины экрана.

body {
  margin: 0;
  width: 100%;
  min-height: 101vh;
  overflow-y: overlay;
  background-color: gray;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.