Как решить проблему с «дерганием» контента при открытии всплывающих окон?

Question

[m1lya]

Набросал пример тут https://jsfiddle.net/yz81kbcu/
По клику я запрещаю скролл для body, но при этом можно скролить сам контент внутри попапа.
А с дерганием не могу ничего решить.

Answer 1

[Алекс Глебов]

body.scoll-off {
   position: fixed;
width: 100%;
overflow-y: scroll;
}

только значение window scroll.top нужно сохранить и при закрытии окна подставить

Comments

[m1lya]

Алекс Глебов не совсем понял, куда подставить?

[Алекс Глебов]

m1lya: если мешает что страница скролится вверх после закрытия окна

при открытии
a = $(window).scrollTop()

при закрытии $(window).scrollTop(a)

Answer 2

[drtvader]

Добавлять паддинг справа в 17 пикселей.
Такой баг есть у бутстрапа.

Comments

[Negwereth]

а почему в 17?

[m1lya]

drtvader А другого выхода нет? Размер бара ведь может быть разным, например на маке, винде и мобильных устройствах. Плюс этот отступ нужно будет добавлять ко всем элементам которые тянутся на всю ширину и у которых есть какой-то фон, в данном случае это шапка.

[drtvader]

Negwereth: ширина скролла 17 пикселей, если не ошибаюсь. Ну по крайней мере хак для бутстрапа делает именно так.

[Алекс Глебов]

там должно быть высчитывание ширины скрола, не факт что в каждом браузере 17

[drtvader]

Алекс Глебов: не буду спорить. Давно дело было.

Answer 3

[Евгений Кузовлев]

Вставьте этот код на страницу, и при открытии окна, добавляйте класс .is-compensate-for-scrollbar к body

scrollWidth = window.innerWidth - document.documentElement.clientWidth;
if (scrollWidth > 1) {
	$('<style type="text/css">')
		.html('.is-compensate-for-scrollbar { padding-right: ' + scrollWidth + 'px; }')
		.appendTo('head');
}

https://jsfiddle.net/rmmtd3q2/