Как предотвратить перемещение полосы прокрутки от веб-страницы?

У меня есть сайт с центрированным DIV. Теперь некоторые страницы нуждаются в прокрутке, некоторые - нет. Когда я перехожу от одного типа к другому, появление полосы прокрутки перемещает страницу на несколько пикселей в сторону. Есть ли способ избежать этого без явного отображения полос прокрутки на каждой странице?

ОТВЕТЫ

Ответ 1

overflow-y: прокрутка верна, но вы должны использовать ее с тегом html, а не с телом, иначе вы получите двойную полосу прокрутки в IE 7
Итак, правильный css будет:

html {
  overflow-y: scroll;
}

Ответ 2

У меня была такая же проблема, но у меня была отличная идея: Оберните содержимое вашего прокручиваемого элемента в div и примените padding-left: calc(100vw - 100%);.

<body>
    <div style="padding-left: calc(100vw - 100%);">
        Some Content that is higher than the user screen
    </div>
</body>

Фокус в том, что 100vw представляет 100% окна просмотра, включая полосу прокрутки. Если вы вычтите 100%, то есть свободное пространство без полосы прокрутки, вы получите ширину полосы прокрутки или 0, если ее нет. Создание прокладки этой ширины слева будет имитировать вторую полосу прокрутки, смещая центрированное содержимое назад вправо.

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

Ответ 3

Думаю, что нет. Но стиль body с overflow: scroll должен делать. Вы, похоже, знаете это.

Ответ 4

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

Попробуйте ограничить ширину тела css3

body {
    width: calc(100vw - 34px);
}

vw - это ширина окна просмотра (см. эту ссылку для некоторого объяснения)
calc вычислить в css3
34px означает двойную ширину полосы прокрутки (см. this для фиксированного или для вычисления, если вы не доверительные фиксированные размеры)

Ответ 5

html {
  overflow-x: hidden;
  margin-right: calc(-1 * (100vw - 100%));
}

Пример. Нажмите кнопку "изменить минимальную высоту".

С calc(100vw - 100%) мы можем рассчитать ширину полосы прокрутки (и если она не отображается, она будет равна 0). Идея: используя отрицательный margin-right, мы можем увеличить ширину <html> до этой ширины. Вы увидите горизонтальную полосу прокрутки - она ​​должна быть скрыта с помощью overflow-x: hidden.

Ответ 6

Я не знаю, если это старый пост, но у меня была такая же проблема, и если вы хотите прокручивать только по вертикали, вы должны попробовать overflow-y:scroll

Ответ 7

При изменении размера или после загрузки некоторых данных он добавляет полосу прокрутки, затем вы можете попробовать следующее, создать класс и применить этот класс.

.auto-scroll {
   overflow-y: overlay;
   overflow-x: overlay;
}

Ответ 8

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

<body id="bodyid>

var bodyid = document.getElementById('bodyid');
bodyid.style.width = window.innerWidth - scrollbarWidth() + "px";

Ответ 9

Расширение от Rapti answer, это должно работать точно так же, но оно добавляет больше поля к правой стороне body и скрывает его с отрицательным полем html вместо добавления дополнительного отступа, который мог бы потенциально влияет на макет страницы. Таким образом, на текущей странице ничего не меняется (в большинстве случаев), и код все еще функционирует.

html {
    margin-right: calc(100% - 100vw);
}
body {
    margin-right: calc(100vw - 100%);
}

Ответ 10

Я попытался исправить, вероятно, ту же проблему, которая вызвана тэтринговым загрузочным .modal-open классом, примененным к body. Решение html {overflow-y: scroll} не помогает. Одно из возможных решений, которое я нашел, - добавить {width: 100%; width: 100vw} в элемент html.

Ответ 11

Развернув ответ, используя это:

body {
    width: calc(100vw - 17px);
}

Один из комментаторов предложил добавить левое дополнение, чтобы поддерживать центрирование:

body {
    padding-left: 17px;
    width: calc(100vw - 17px);
}

Но тогда все выглядит неправильно, если ваш контент шире, чем область просмотра. Чтобы исправить это, вы можете использовать медиа-запросы, например:

@media screen and (min-width: 1058px) {
    body {
        padding-left: 17px;
        width: calc(100vw - 17px);
    }
}

Где 1058px = ширина содержимого + 17 * 2

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

Ответ 12

Решения, размещенные с использованием calc (100vw - 100%), находятся на правильном пути, но есть проблема с этим: у вас навсегда будет поле слева от размера полосы прокрутки, даже если вы измените размер окна так что содержимое заполняет весь видовой экран.

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

Здесь решение, которое обойти это и AFAIK, не имеет недостатков:

Вместо того, чтобы использовать margin: auto для центра вашего контента, используйте это:

body {
margin-left: calc(50vw - 500px);
}

Замените 500 пикселей на половину максимальной ширины вашего содержимого (так что в этом примере максимальная ширина содержимого составляет 1000 пикселей). Теперь контент будет оставаться центрированным, и маржа будет постепенно уменьшаться до тех пор, пока контент не заполнит область просмотра.

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

@media screen and (max-width:1000px) {
    body {
        margin-left: 0;
    }
}

Et voilà!

Ответ 13

Я использую эту проблему, но простой способ ее исправить - это (это работает для меня):

в файле типа CSS:

body{overflow-y:scroll;}

как это просто!:)

Ответ 14

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

Используйте статическую ширину, и моя позиция div будет абсолютной. Работает на меня.

#divID{
overflow: hidden;
width: calc(1024px + 0);
}

#divID:hover{
overflow-y:scoll;
}

Ответ 15

Я использовал некоторый jquery, чтобы решить эту проблему.

$('html').css({
    'overflow-y': 'hidden'
});

$(document).ready(function(){
  $(window).load(function() {
    $('html').css({
      'overflow-y': ''
    });
  });
});

Ответ 16

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

html{
  height:101%;
}

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

Это имеет больше смысла, чем this.

Ответ 17

@media screen and (min-width: 1024px){
    body {
    min-height: 700px
    }
}