Есть два решения этой проблемы:
1. Динамический сдвиг на ширину полосы прокрутки.
Для этого нужно динамически определять ширину прокрутки. У элемента html
изначально должно быть overflow-y: scroll
. Модальное окно при этом будет открываться со свойством position: fixed
. Перед открытием модального окна, элементу html
задается overflow: hidden
, а элементу body
задается margin-right: (ширина полосы прокрутки)px
(при этом у обоих элементов не должны быть заданы ширины width
). Далее запускается слушатель события window
resize
, и при масштабировании окна, динамически корректируется margin-right: (ширина полосы прокрутки)px
у элемента body
.
При скрытии модального окна отключается слушатель window
resize
, убираются margin
у body
, а элементу html
возвращается свойство overflow-y: scroll
.
Ширину вертикальной и горизональной полосы прокрутки обычно определяют с помощью такой функции (попробуйте запустить ее при разных масштабах страницы):
var getScrollBarSize = (function() {
var el = window.document.createElement('textarea'), style = {
'visibility': 'hidden', 'position': 'absolute', 'zIndex': '-2147483647',
'top': '-1000px', 'left': '-1000px', 'width': '1000px', 'height': '1000px',
'overflow': 'scroll', 'margin': '0', 'border': '0', 'padding': '0'
}, support = el.clientWidth !== undefined && el.offsetWidth !== undefined;
for (var key in style) {
if (style.hasOwnProperty(key)) {
el.style[key] = style[key];
}
}
return function() {
var size = null;
if (support && window.document.body) {
window.document.body.appendChild(el);
size = [el.offsetWidth - el.clientWidth, el.offsetHeight - el.clientHeight];
window.document.body.removeChild(el);
}
return size;
};
})();
console.log(getScrollBarSize());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
У этого способа есть несколько особенностей. Полоса прокрутки всегда отбражается в настольных браузерах, независимо от содержания страницы. Правильная реализация должна учитывать направление контента dir="ltr"
или dir="rtl"
. Сдвигать придется не только body
, но и все элементы, имеющие position: fixed
позиционированные от той стороны с которой находится прокрутка. Последние версии браузера IE имеют баг с масштабированием полос прокруток (полосы прокрутки окна браузера и элементов имеют разную ширину, что не дает правильно определить ширину прокрутки).
2. Верстка слоями.
Создается глобальный элемент div id="wrapper"
, и глобальный скролл переносится в него, а у элементов html
, body
- отключается:
html, body {
height: 100%;
overflow: hidden;
}
html > body > #wrapper {
height: 100%;
position: relative;
overflow: auto;
}
Все модальные окна, при этом, также размещаются внутри body
, на одном уровне с элементом #wrapper
. Тогда у вас вообще не будет проблем с полосами прокруток, так как у каждого слоя они будут свои. Но у этого способа есть несколько особенностей... В мобильных браузерах перестает скрываться панель инструментов браузера. Вместо position: fixed
вы везде должны как-то обходится с помощью position: absolute
, что иногда совсем не "гибко". Вам нужно также задать @media print стили для корректной печати такого сайта.
overflow: hidden;
? Приведите разметку и стили.overflow: hidden
этому же элементу (которому добавляетсяoverflow: hidden
) добавлятьpadding-right: x
, где х - ширина скроллбара