Полоса прокрутки перемещает содержимое страницы влево

Я впервые создаю свой сайт в Bootstrap, и у меня проблема, что я не могу найти решение этого. Когда я добавляю некоторый контент, и если его большой и достаточно большой, чтобы добавить полосу прокрутки в браузере, содержимое всей страницы перемещается влево.

Простыми словами: если есть полоса прокрутки, содержимое страницы перемещается влево, как 17px, а если нет, все работает нормально. Я не хочу добавлять панель прокрутки перманентного типа, например

overflow-y: scroll;

и если я добавлю

width: 100vw;

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

Ответы

Ответ 1

У вас есть несколько решений:

  • Вы можете постоянно показывать свой свиток и стилизовать его, чтобы быть частью своей страницы:

    html {
    overflow-y: scroll;
}

  • Вы можете добавить:

    padding-right: 40px;

    поскольку 40px - это то, что я слышал, это максимальный размер прокрутки, который вы можете получить.

  • Создайте родительский div, который будет содержать все ваше содержимое, а затем создайте немного меньший, сделайте так, чтобы изменение размера родителя не изменило размер ребенка.

  • Вы можете создать JS-функцию, которая будет определять, будет ли прокрутка отображаться на странице, и она изменит настройки поля.

  • Вы можете использовать мультимедийные запросы, чтобы решить эту проблему.