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

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

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

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

10 87
html css google-chrome scrollbar

10 ответов:

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

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

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/

29

старая нить, но все еще актуальна!

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

.yourContent{
   overflow-y: overlay;
}

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

56

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

html {
    overflow-y: scroll;
}

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

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

52

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

попробуйте использовать .

19

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

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

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

11

наверное

html {
    width: 100vw;
}

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

7

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

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

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

2

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

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

пример

chrome devtools showing padding unmoved

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

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

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

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

0

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

#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

0