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

Ответ 1

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

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

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/

Ответ 2

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

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

.yourContent{
   overflow-y: overlay;
}

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

Ответ 3

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

html {
    overflow-y: scroll;
}

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

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

Ответ 4

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

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

Ответ 5

Возможно

html {
    width: 100vw;
}

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

Ответ 6

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

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

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

Ответ 7

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

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

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

Ответ 8

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

Ответ 9

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

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

ПРИМЕР

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

Ответ 10

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

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

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

Ответ 11

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

body {
    padding-left: 15px;
}

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

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

Ответ 12

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

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