У меня есть сайт с центрированным DIV. Теперь некоторые страницы нуждаются в прокрутке, некоторые - нет. Когда я перехожу от одного типа к другому, появление полосы прокрутки перемещает страницу на несколько пикселей в сторону. Есть ли способ избежать этого без явного отображения полос прокрутки на каждой странице?Как предотвратить прокрутку полосы прокрутки веб-страницы?
переполнение-у: прокручивание правильно, но вы должны использовать это с HTML тегов, а не телом, иначе вы получите двойную полосу прокрутку в IE 7
Так правильный CSS будет:
html {
overflow-y: scroll;
}
IE 10+ имеет плавающий полоса прокрутки, поэтому вы должны отключить это для этих браузеров. – Ruben
это может вызвать проблемы, такие как двойные полосы прокрутки при использовании в сочетании с fancybox или twitter bootstrap modal – Ruben
Дополнительная информация: twitter bootstrap теперь добавляет .modal-open для вас, когда модальный открыт – Ruben
Думаю, что нет. Но стиль body с overflow: scroll должен делать. Вы, кажется, знаете это.
Звучит неплохо ... заставляют страницу всегда показывать полосу прокрутки независимо от того, нужна она ей или нет, ... тогда нет визуальных изменений между типами страниц. – eidylon
Да, но IIRC, это показывает * обе * полосы прокрутки. Мне не нужен горизонтальный. –
Это правда. Но я не могу сделать, чтобы помочь вам :(На самом деле, я рассматриваю только первое предложение моего ответа как * реальный * ответ, который касается вопроса. –
Я не знаю, если это старый пост, но я была такая же проблема, и если вы хотите, чтобы просмотреть только по вертикали, вы должны попробовать overflow-y:scroll
Я решил вопрос на одном из моих сайтов, явно устанавливая ширину тела в javascript по размеру видового экрана минус ширина полосы прокрутки. Я использую функцию на основе jQuery, зарегистрированную here, чтобы определить ширину полосы прокрутки.
<body id="bodyid>
var bodyid = document.getElementById('bodyid');
bodyid.style.width = window.innerWidth - scrollbarWidth() + "px";
Я могу ' t даже начать объяснять, почему это такая плохая практика. – mythofechelon
Бада практике. Согласен. – Rushino
@BenHooper: Я хотел бы знать, почему это плохая практика. – Saad
С прокруткой, которая всегда отображается, возможно, не подходит для макета.
Try, чтобы ограничить ширину тела с CSS3
body {
width: calc(100vw - 34px);
}
vw ширин окна просмотра (см this link для некоторого объяснения)
calc вычислит CSS3
34px обозначают двойную ширину полосы прокрутки (см this для фиксированный или this to calculate, если вы не доверяете фиксированным размерам)
Все бесполезно, пока кому-то не нужно. – Moesio
Это визуально намного менее навязчиво, чем просто форсирование scollbars, как описывает принятый ответ. –
Это необычайно полезно, намного лучше, чем так называемый лучший ответ. Работал мгновенно. Нет полосы прокрутки, когда это не нужно. – Zdenek
Чтобы полоса прокрутки появлялась за пределами div eleme nt предотвращает перепозиционирование содержимого внутри div.
Используйте статическую ширину, и у меня есть позиция div как абсолютная. Работает на меня.
#divID{
overflow: hidden;
width: calc(1024px + 0);
}
#divID:hover{
overflow-y:scoll;
}
Я была такая же проблема, но я просто была отличная идея: Оберните содержание вашего прокруткой элемента в 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, если ее нет. Создание прокладки этой ширины слева будет имитировать вторую полосу прокрутки, смещая центрированное содержимое назад вправо.
Обратите внимание, что это будет работать только в том случае, если прокручиваемый элемент использует всю ширину страницы, но в большинстве случаев это не проблема, потому что есть только несколько других случаев, когда вы имеете центрированное прокручиваемое содержимое.
не работает ... –
Он отлично работает для меня! Почему вниз вниз? –
Было бы лучше применять класс, чем встроенный стиль, и будет работать только в [этих браузерах] (http://caniuse.com/#search=calc), но это умная техника - я не понял, что '100vw' и' 100% 'измеряли разные вещи, поэтому я узнал от этого что-то полезное! –
Я попытался исправить, вероятно, ту же проблему, которая вызвана загрузкой твиттера .modal-open, применяемой к body. Решение html {overflow-y: scroll} не помогает.Одно из возможных решений, которое я нашел, - добавить {width: 100%; width: 100vw} в элемент html.
Вопреки принятому ответ что предполагает постоянную полосу прокрутки в окне браузера, даже если содержание не переполнение экрана, я предпочел бы, используя:
html{
height:101%;
}
Это происходит потому, что появление полоса прокрутки имеет больше смысла, если контент фактически переполняется.
По крайней мере последнее предложение неверно в вашем ответе. Это имеет смысл аналогично избыточной пустой странице, напечатанной принтером. –
Я использовал некоторые JQuery, чтобы решить эту
$('html').css({
'overflow-y': 'hidden'
});
$(document).ready(function(){
$(window).load(function() {
$('html').css({
'overflow-y': ''
});
});
});
Вероятно, вы получаете плохой прием на свой ответ, потому что для этого решения требуется вся инфраструктура JavaScript. «jQuery все!» –
Недостаточно jQuery – bgusach
Да, jQuery - это, безусловно, путь - http://www.doxdesk.com/img/updates/20091116-so-large.gif – Annonymous
@media screen and (min-width: 1024px){
body {
min-height: 700px
}
}
Добро пожаловать в Stack Overflow! Хотя этот фрагмент кода может решить вопрос, [включая объяснение] (// meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причин вашего предложения кода. Также попробуйте не толковать код с пояснительными комментариями, что уменьшает читаемость кода и объяснений! –
html {
overflow-x: hidden;
margin-right: calc(-1 * (100vw - 100%));
}
Example. Нажмите кнопку «изменить минимальную высоту».
С calc(100vw - 100%) мы можем рассчитать ширину полосы прокрутки (и если она не отображается, она будет равна 0). Идея: используя отрицательный margin-right, мы можем увеличить ширину <html> до этой ширины. Вы увидите горизонтальную полосу прокрутки - она должна быть скрыта с помощью overflow-x: hidden.
Мне пришлось поместить тело в div и применить маржу к div для его работы (подобно [ответу Рапти] (https://stackoverflow.com/a/30293718/6015444).) Но это выглядит так аккуратнее. – Touniouk
работает отлично. Благодаря! –
я использую, чтобы иметь эту проблему, но Simples способ исправить это (это работает для меня):
от типа CSS файла:
body{overflow-y:scroll;}
, как это просто! :)
Развивая ответ, используя это:
body {
width: calc(100vw - 17px);
}
Один commentor предложил добавить левый отступы, а также для поддержания центровки:
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
Это позволяет горизонтальная полоса прокрутки обрабатывать переполнение х и сохраняет центрированное содержание по центру, когда область просмотра достаточно широка, чтобы содержать контент с фиксированной шириной.
Решения, размещенные с использованием calc (100vw - 100%), находятся на правильном пути, но есть проблема с этим: у вас навсегда будет запас для оставил размер полосы прокрутки, даже если вы измените размер окна, чтобы содержимое заполнило весь видовой экран.
Если вы попытаетесь обойти это с помощью медиа-запроса, у вас будет неудобный момент щелчка, потому что при изменении размера окна маржа не будет постепенно уменьшаться.
Вот решение, которое получает вокруг, что и AFAIK не имеет недостатков:
Вместо использования маржи: авто для центрирования содержимого, используйте это:
body {
margin-left: calc(50vw - 500px);
}
Заменить 500px с половиной максимальной ширины вашего контента (поэтому в этом примере максимальная ширина содержимого составляет 1000 пикселей). Теперь контент будет оставаться в центре и. Постепенное значение поля будет постепенно уменьшаться до тех пор, пока контент не заполнит область просмотра.
Для того, чтобы остановить маржу от перехода отрицательной, когда видовой экран меньше максимальной ширины просто добавить медиа-запрос следующим образом:
@media screen and (max-width:1000px) {
body {
margin-left: 0;
}
}
вуаля!
При изменении размера или после загрузки некоторых данных он добавляет полосу прокрутки, после чего вы можете попробовать следующее, создать класс и применить этот класс.
.auto-scroll {
overflow-y: overlay;
overflow-x: overlay;
}
простирающегося от Rapti's answer, это будет работать так же хорошо, но это добавляет больше запас на правой стороне body и скрывает его с отрицательным html запасом, вместо того, чтобы добавлять дополнительные прокладки, которые могли бы на самом деле потенциально повлиять на макет страницы. Таким образом, ничто не изменяется на фактической странице (в большинстве случаев), и код по-прежнему функционирует.
html {
margin-right: calc(100% - 100vw);
}
body {
margin-right: calc(100vw - 100%);
}
Возможный дубликат [Как остановить мой веб-контент от смены влево при появлении вертикальной полосы прокрутки? Roll-Up of Advice 2017] (https://stackoverflow.com/questions/45524214/how-do-i-stop-my-web-content-from-shifting-left-when-the-vertical-scrollbar-appe) – JBH