Контент перемещается горизонтально, когда браузер добавляет полосу прокрутки

Question

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

Является ли сравнение externalHeight с window.innerHeight подходящим способом решения этой проблемы? Есть ли другой способ решить эту проблему?

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

Изменить для уточнения: я не хочу заставлять полосу прокрутки появляться.

Answer 1

Я просто оставлю эту ссылку здесь, потому что это кажется мне элегантным решением:

https://aykevl.nl/2014/09/fix-jumping-scrollbar

Что он делает, так это добавляет этот CSS:

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

Это сместит контент влево только на размер полосы прокрутки, поэтому, когда он появляется, контент уже перемещен.Это работает для центрированного контента с overflow: auto;, примененным к тегу html.Медиа-запрос отключает это для мобильных телефонов, так как очевидна разница в ширине полей.

Пример вы можете увидеть здесь:

http://codepen.io/anon/pen/NPgbKP

Answer 2

Я сам столкнулся с этой проблемой и нашел два способа ее решения:

1. Всегда заставляйте полосу прокрутки присутствовать: body { overflow-y: scroll; } Установка на html не работает во всех браузерах или может дать двойные полосы прокрутки, если полоса прокрутки появляется.

2. Добавьте класс, который добавляет ~ 30 пикселей к правому краю вашей страницы, если полоса прокрутки отсутствует.

Я выбрал вариант 1, но не уверен, работает ли он во всех браузерах (особенно в старых).

Facebook использует вариант 2.

Answer 3

Вы можете заставить полосу прокрутки появляться всегда:

http://www.mediacollege.com/internet/css/scroll-always.html

Answer 4

Процесс такой:

html {
   overflow-y: scroll !important;
}

Это покажет полосу прокрутки, даже если она не нужна.

Answer 5

Используйте этот CSS:

body { overflow-y: scroll; }

Answer 6

Лучший возможный путь через CSS, он будет показывать / скрывать полосу прокрутки соответственно, будет решить проблему прыжка, работает на любом браузере

html {
    overflow: hidden;
 }

body {
    overflow-y: auto;
    -webkit-overflow-scrolling:touch;
}