it-swarm.com.ru

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

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

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

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

95
Acemad

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

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

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/

31
Lwyrn

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

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

.yourContent{
   overflow-y: overlay;
}

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

83
simonDos

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

html {
    overflow-y: scroll;
}

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

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

53
Hive7

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

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

19
Kyle Dumovic

Наверное

html {
    width: 100vw;
}

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

12
TranslucentCloud

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

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

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

12
fuzzy_logic_77

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

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

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

2
Hashbrown

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

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

ПРИМЕР

chrome devtools showing padding unmoved

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

1
Hashbrown

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

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

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

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

0
Piotr Siatkowski

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

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
jeremy

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

body {
    padding-left: 15px;
}

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

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