У меня возникла небольшая проблема с попыткой сохранить мои страницы .html постоянной ширины в Chrome. Например, у меня есть страница (1) с большим количеством содержимого, которое выходит за пределы высоты окна просмотра (правильное слово?), Поэтому есть вертикальная полоса прокрутки на этой странице (1). На странице (2) у меня такой же макет (меню, блоки и т. Д.), Но меньше контента, поэтому вертикальных полос прокрутки там нет.
Проблема в том, что на странице (1) полосы прокрутки, кажется, немного сдвигают элементы влево (прибавляя к ширине?), В то время как все выглядит хорошо центрированным на странице (2).
Я все еще новичок в HTML / CSS / JS, и я вполне убежден, что это не так уж и сложно, но мне не удалось найти решение. Он работает как задумано в IE10 и FireFox (не мешающие полосы прокрутки), я столкнулся с этим только в Chrome.
источник
ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ : наложение было устаревшим .
Вы все еще можете использовать это, если вам абсолютно необходимо, но постарайтесь не делать этого.
Это работает только в браузерах WebKit , но мне это очень нравится. Будет вести себя как
auto
в других браузерах.Это заставит полосу прокрутки отображаться только как наложение , что не повлияет на ширину вашего элемента!
источник
Все, что вам нужно сделать, это добавить:
В вашем файле css, поскольку у него будет скроллер, нужен он или нет, хотя вы просто не сможете прокручивать
Это означает, что область просмотра будет иметь одинаковую ширину для обоих
источник
Наверное
это именно то, что вы хотите.
источник
calc()
для определения ширины основного представления контента, чтобы фиксированная внеэкранная навигация могла занимать левую часть экрана на рабочем столе, при этом сохраняя родную прокрутите на мобильном телефоне.html
шириной вvw
s немного хакерски , поэтому будьте осторожны!Браузеры Webkit, такие как Safari и Chrome, вычитают ширину полосы прокрутки из видимой ширины страницы при вычислении ширины: 100% или 100vw. Подробнее см . Прокрутка и ширина страницы Д.М. Резерфорда .
Попробуйте использовать
overflow-y: overlay
вместо этого.источник
Я обнаружил, что могу добавить
непосредственно на мой css, и это сделает полосу прокрутки невидимой, но все же позволит мне прокручивать (по крайней мере, в Chrome). Подходит, когда вам не нужна отвлекающая полоса прокрутки на странице!
источник
Для контейнеров с фиксированной шириной можно реализовать кросс-браузерное решение на чистом CSS , обернув контейнер в другой div и применив одинаковую ширину к обоим div.
Щелкните здесь, чтобы увидеть пример на Codepen
источник
Не похоже, что мой другой ответ в настоящий момент работает правильно (но я буду продолжать пытаться заставить его работать).
Но в основном то, что вам нужно сделать, и то, что он пытается сделать динамически, - это установить ширину содержимого немного меньше, чем у родительской прокручиваемой панели.
Таким образом, когда появляется полоса прокрутки, она не влияет на содержимое.
В этом ПРИМЕРЕ показан более хитрый способ достижения этой цели путем жесткого кодирования
width
s вместо того, чтобы пытаться заставить браузер сделать это за нас черезpadding
.Если это возможно, это самое простое решение, если вам не нужна постоянная полоса прокрутки.
источник
РЕДАКТИРОВАТЬ: этот ответ на данный момент не совсем правильный, обратитесь к моему другому ответу, чтобы узнать, что я пытался здесь сделать. Я пытаюсь это исправить, но если вы можете предложить помощь, сделайте это в комментариях, спасибо!
Использование
padding-right
уменьшит внезапное появление полосы прокруткиПРИМЕР
Как вы можете видеть по точкам, текст до переноса страницы попадает в ту же точку страницы, независимо от того, присутствует ли полоса прокрутки или нет.
Это потому, что когда вводится полоса прокрутки, отступы скрываются за ней, поэтому полоса прокрутки не нажимает на текст!
источник
где 300 пикселей - это половина ширины моего диалогового окна.
На самом деле это единственное, что у меня сработало.
источник
У меня была такая же проблема в Chrome. У меня это случилось только тогда, когда полоса прокрутки всегда видна. (находится в общих настройках) У меня есть модальное окно, и когда я открываю его, я заметил, что ...
добавляется в тело. Чтобы этого не произошло, я добавил
источник
Я не могу добавить комментарий к первому ответу, и это было давно ... но в этой демонстрации есть проблема:
b.prop ('scrollHeight') всегда равно b.height (),
Думаю, должно быть так:
Напоследок рекомендую метод:
источник