Предотвращение добавления полосы прокрутки к ширине страницы в Chrome

125

У меня возникла небольшая проблема с попыткой сохранить мои страницы .html постоянной ширины в Chrome. Например, у меня есть страница (1) с большим количеством содержимого, которое выходит за пределы высоты окна просмотра (правильное слово?), Поэтому есть вертикальная полоса прокрутки на этой странице (1). На странице (2) у меня такой же макет (меню, блоки и т. Д.), Но меньше контента, поэтому вертикальных полос прокрутки там нет.

Проблема в том, что на странице (1) полосы прокрутки, кажется, немного сдвигают элементы влево (прибавляя к ширине?), В то время как все выглядит хорошо центрированным на странице (2).

Я все еще новичок в HTML / CSS / JS, и я вполне убежден, что это не так уж и сложно, но мне не удалось найти решение. Он работает как задумано в IE10 и FireFox (не мешающие полосы прокрутки), я столкнулся с этим только в Chrome.

Acemad
источник

Ответы:

42

Вы можете получить размер полосы прокрутки, а затем применить маржу к контейнеру.

Что-то вроде этого:

var checkScrollBars = function(){
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('#container').css({marginRight:'-'+scrollw+'px'});
    }
}

CSS для удаления h-полосы прокрутки:

body{
    overflow-x:hidden;
}

Попробуйте взглянуть на это: http://jsfiddle.net/NQAzt/

Lwyrn
источник
1
Умное решение, хотя я не понимаю условия в "если"!
Acemad
3
ScrollHeight - это общая высота элемента. Что вы видите и что скрыто. Пример: ваше окно имеет высоту 500 пикселей, в теле - 900 пикселей. Отображаются 500 пикселей, но остальные 400 пикселей скрыты, и появится полоса прокрутки, показывающая этот оставшийся пиксель. Таким образом, условие похоже на «если высота всего содержимого больше, чем высота точки обзора, добавьте поле к основному тексту». Извините за мой плохой английский
Lwyrn
Я получил это сейчас, спасибо за четкое объяснение, я попробовал это решение и получил дополнительную горизонтальную полосу прокрутки, хотя не знаю почему.
Acemad 02
2
Я добавил небольшой фрагмент css, чтобы предотвратить это в ответе :)
Lwyrn 02
4
Это решение отключает прокрутку
avalanche1
117

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ : наложение было устаревшим .
Вы все еще можете использовать это, если вам абсолютно необходимо, но постарайтесь не делать этого.

Это работает только в браузерах WebKit , но мне это очень нравится. Будет вести себя как autoв других браузерах.

.yourContent{
   overflow-y: overlay;
}

Это заставит полосу прокрутки отображаться только как наложение , что не повлияет на ширину вашего элемента!

simonDos
источник
Это не работает для IE11. Есть ли способ обхода значения оверлея для работы в IE.
Анвеш Редди
Насколько я знаю, вам придется
довольствоваться
Многое требуется! Мне потребовалось больше получаса, чтобы просто посмотреть, что, черт возьми, я сделал не так со своей разметкой. Какие стили я злоупотреблял? Это тоже должно быть по умолчанию.
kushalvm
3
Но это устарело
Акаш Йеллаппа
1
Я обновил решение, чтобы отразить это. Kinda sad: P
simonDos
57

Все, что вам нужно сделать, это добавить:

html {
    overflow-y: scroll;
}

В вашем файле css, поскольку у него будет скроллер, нужен он или нет, хотя вы просто не сможете прокручивать

Это означает, что область просмотра будет иметь одинаковую ширину для обоих

Hive7
источник
4
Итак, я обязан добавить полосы прокрутки к обоим? разве нет способа просто игнорировать ширину вертикальной полосы прокрутки? Спасибо !
Acemad
Нет никакого способа игнорировать это, о чем я знаю, но то, что я сказал, работает с удовольствием @ Rockr90
Hive7
@ d3c0y, это правда, и я упомянул об этом в ответе, но это самый простой способ сделать это. Однако я не знаю, изменилось ли это за последние 3 года
Hive7
@aks. он заставляет браузер думать, что вы можете прокручивать, поэтому позволяет использовать полосу прокрутки и прокрутку y - это боковой скроллер
Hive7
1
переполнение-y: прокрутка; добавит / покажет полосу прокрутки во всех окнах просмотра, даже если нет прокручиваемых элементов.
Abhilash
35

Наверное

html {
    width: 100vw;
}

это именно то, что вы хотите.

медиатор
источник
1
Это отлично сработало для моего варианта использования : gist.github.com/bmcminn/1ab50da18bde75f39bc88e8292a5a847 Я использую calc()для определения ширины основного представления контента, чтобы фиксированная внеэкранная навигация могла занимать левую часть экрана на рабочем столе, при этом сохраняя родную прокрутите на мобильном телефоне.
bmcminn
3
Я возился с моими полосами прокрутки последние 36 часов. У меня было несколько разных решений, которые работали, но возникли другие проблемы. Это первое решение, которое работает и позволяет мне использовать обычную полосу прокрутки в другом месте. Спасибо.
кошерно
Пожалуйста! Но возиться с htmlшириной в vws немного хакерски , поэтому будьте осторожны!
Neurotransmitter
Это отлично сработало, может кто-нибудь объяснить, как это работает?
Zeus
1
Решение неплохое, но можно было добавить горизонтальную прокрутку.
FDisk
19

Браузеры Webkit, такие как Safari и Chrome, вычитают ширину полосы прокрутки из видимой ширины страницы при вычислении ширины: 100% или 100vw. Подробнее см . Прокрутка и ширина страницы Д.М. Резерфорда .

Попробуйте использовать overflow-y: overlayвместо этого.

Кайл Думович
источник
9
Пожалуйста, не публикуйте одинаковые ответы на несколько вопросов. Опубликуйте один хороший ответ, затем проголосуйте / отметьте, чтобы закрыть другие вопросы как повторяющиеся. Если вопрос не повторяется, адаптируйте свои ответы к вопросу.
Пол Руб
Это должно работать, но оверлей еще не является стандартом и поддерживается во всех браузерах.
Zia Ul Rehman Mughal
Быстрый сбой: в Safari из-за этого страница перестала прокручиваться
joshfindit
13

Я обнаружил, что могу добавить

::-webkit-scrollbar { 
display: none; 
}

непосредственно на мой css, и это сделает полосу прокрутки невидимой, но все же позволит мне прокручивать (по крайней мере, в Chrome). Подходит, когда вам не нужна отвлекающая полоса прокрутки на странице!

fuzzy_logic_77
источник
5
Это несколько рискованное и не кроссбраузерное решение, хотя stackoverflow.com/questions/9251354/…
Alex Pyzhianov
4

Для контейнеров с фиксированной шириной можно реализовать кросс-браузерное решение на чистом CSS , обернув контейнер в другой div и применив одинаковую ширину к обоим div.

#outer {
  overflow-y: auto;
  overflow-x: hidden;
  /*
   * width must be an absolute value otherwise the inner divs width must be set via
   * javascript to the computed width of the parent container
   */
  width: 200px;
}

#inner {
  width: inherit;
}

Щелкните здесь, чтобы увидеть пример на Codepen

Robbendebiene
источник
3

Не похоже, что мой другой ответ в настоящий момент работает правильно (но я буду продолжать пытаться заставить его работать).

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

В этом ПРИМЕРЕ показан более хитрый способ достижения этой цели путем жесткого кодирования widths вместо того, чтобы пытаться заставить браузер сделать это за нас через padding.
Если это возможно, это самое простое решение, если вам не нужна постоянная полоса прокрутки.

Hashbrown
источник
Это хорошее решение, однако я работаю над адаптивным веб-сайтом с использованием Bootstrap, и важно автоматизировать ширину и все такое, что вы скажете?
Acemad
ну, если (в порядке убывания вероятности) либо: кто-то выясняет, как заставить работать мой другой ответ (с заполнением или полем); вы можете каким-то образом использовать медиа-запросы для выборочного применения отступов; или выражения css реализованы в современных браузерах для выборочного применения отступов. Я думаю, что только постоянная полоса прокрутки или использование JS для обнаружения полосы прокрутки - это выход
Hashbrown 01
1

РЕДАКТИРОВАТЬ: этот ответ на данный момент не совсем правильный, обратитесь к моему другому ответу, чтобы узнать, что я пытался здесь сделать. Я пытаюсь это исправить, но если вы можете предложить помощь, сделайте это в комментариях, спасибо!

Использование padding-rightуменьшит внезапное появление полосы прокрутки

ПРИМЕР

Chrome devtools показывает, что отступы не перемещены

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

Hashbrown
источник
3
Ширина полосы прокрутки может меняться в зависимости от того, какую ОС и браузер вы используете. Он может измерять 20 пикселей, а также 40 пикселей
Lwyrn
2
ну, вы бы использовали максимум из всех возможных значений
Hashbrown
1
Прокрутки некоторых устройств / браузеров ОС даже не имеют ширины.
Sergey Goliney
0
.modal-dialog {
   position: absolute;
   left: calc(50vw - 300px);
}

где 300 пикселей - это половина ширины моего диалогового окна.

На самом деле это единственное, что у меня сработало.

Петр Сятковский
источник
0

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

body {
    padding-left: 15px;
}

добавляется в тело. Чтобы этого не произошло, я добавил

body {
    padding-left: 0px !important;
}
NatD
источник
0

Я не могу добавить комментарий к первому ответу, и это было давно ... но в этой демонстрации есть проблема:

if(b.prop('scrollHeight')>b.height()){
    normalw = window.innerWidth;
    scrollw = normalw - b.width();
    $('#container').css({marginRight:'-'+scrollw+'px'});
}

b.prop ('scrollHeight') всегда равно b.height (),

Думаю, должно быть так:

if(b.prop('scrollHeight')>window.innerHeight) ...

Напоследок рекомендую метод:

html {
 overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
 width: 100vw;
 overflow: hidden;
}
Jeremy
источник