Запобігайте розширенню смуги прокрутки до Ширини сторінки в 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;
}

це саме те, що ти хочеш.

Веб-браузери на зразок Safari та Chrome віднімають ширину смуги прокрутки від видимої ширини сторінки при розрахунку ширини: 100% або 100vw. Детальніше про прокрутку та широту сторінку DM Rutherford .

Спробуйте використовувати overflow-y: overlayзамість цього.

Я виявив, що можу додати

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

безпосередньо до мого css, і це зробить смугу прокрутки невидимою, але все ж дозволить мені прокручувати (принаймні на Chrome). Добре, коли ви не хочете відволікаючої смуги прокрутки на своїй сторінці!

Для контейнерів із фіксованою шириною може бути досягнуто чисте перехресне рішення браузера CSS , обернувши контейнер в інший діл та застосувавши однакову ширину до обох 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.
Якщо це можливо, це найпростіше рішення, якщо ви не хочете постійної смуги прокрутки.

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

Використання 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;
}