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

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

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

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

+103
31 авг. '13 в 13:03
источник поделиться
12 ответов

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

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

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-scrollbar:

body{
    overflow-x:hidden;
}

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

+34
31 авг. '13 в 13:55
источник

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

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

.yourContent{
   overflow-y: overlay;
}

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

+93
11 мая '17 в 10:07
источник
другие ответы

Связанные вопросы


Похожие вопросы

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

html {
    overflow-y: scroll;
}

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

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

+54
31 авг. '13 в 13:07
источник

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

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

+19
28 сент. '16 в 23:25
источник

Возможно

html {
    width: 100vw;
}

- это то, что вы хотите.

+16
16 мая '17 в 11:32
источник

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

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

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

+11
29 авг. '15 в 8:31
источник

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

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

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

+3
31 авг. '13 в 14:13
источник

Для контейнеров с фиксированной шириной кросс-браузерное решение на чистом 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

+3
08 апр. '18 в 11:20
источник

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

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

ПРИМЕР

chrome devtools showing padding unmoved

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

+1
31 авг. '13 в 13:31
источник
.modal-dialog {
   position: absolute;
   left: calc(50vw - 300px);
}

где 300 px - половина ширины окна диалога.

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

0
14 авг. '17 в 11:05
источник

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

body {
    padding-left: 15px;
}

добавляется в тело. Чтобы этого не случилось, я добавил

body {
    padding-left: 0px !important;
}
0
12 нояб. '18 в 19:35
источник

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

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;
}
0
16 нояб. '18 в 15:27
источник

Посмотрите другие вопросы по меткам или Задайте вопрос