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

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

181 голосов
/ 13 сентября 2009

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

Ответы [ 16 ]

239 голосов
/ 30 сентября 2011

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

html {
  overflow-y: scroll;
}
44 голосов
/ 18 мая 2015

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

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

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

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

43 голосов
/ 13 сентября 2009

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

32 голосов
/ 22 сентября 2014

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

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

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

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

18 голосов
/ 02 сентября 2016 
html {
  overflow-x: hidden;
  margin-right: calc(-1 * (100vw - 100%));
}

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

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

13 голосов
/ 07 октября 2009

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

8 голосов
/ 24 августа 2017

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

.auto-scroll {
   overflow-y: overlay;
   overflow-x: overlay;
}
3 голосов
/ 14 ноября 2017

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

html {
    margin-right: calc(100% - 100vw);
}
body {
    margin-right: calc(100vw - 100%);
}
3 голосов
/ 09 ноября 2011

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

<body id="bodyid>

var bodyid = document.getElementById('bodyid');
bodyid.style.width = window.innerWidth - scrollbarWidth() + "px";
2 голосов
/ 13 марта 2017

Решения, опубликованные с использованием 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à!

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...