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

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

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

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

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

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

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/

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

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

.yourContent{
   overflow-y: overlay;
}

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

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

html {
    overflow-y: scroll;
}

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

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

Наверное

html {
    width: 100vw;
}

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

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

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

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

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

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

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

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

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

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

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

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

ПРИМЕР

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

.modal-dialog {
   position: absolute;
   left: calc(50vw - 300px);
}

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

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

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

body {
    padding-left: 15px;
}

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

body {
    padding-left: 0px !important;
}

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

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;
}