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

Question

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

Answer 1

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

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 и сохранять центрированное содержимое по центру, когда область просмотра достаточно широка, чтобы содержать содержимое фиксированной ширины

Answer 2

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

Answer 3

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

для типа файла CSS:

body{overflow-y:scroll;}

как все просто! :)

Answer 4

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

Answer 5

Я использовал JQuery для решения этой проблемы

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

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

Answer 6

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

html{
  height:101%;
}

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

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