Как сделать скролл модального окна а не страницы, или избежать скачка при исчезновении скролла Body/html?

Question

[qfrontend]

Приветствую) Есть модальное окно с (position: fixed; и width: 100%;), при изменении размеров окна браузера оно становится длинным и появляется скролл? Как сделать так что бы этот скролл встал как бы в место того который по краю окна браузера скролит Body/HTML, что бы это было плавно без скачка?
Я делаю так: при нажатии на кнопку "openBtn" скрываю скролл окна браузера (document.body.style.overflow='hidden';) и при нажатии на "closeBtn" возвращаю его (document.body.style.overflow='scroll';) Но это всё происходит скачком, и на какие то доли секунды видны 2 скролла. Как сделать это без скачков?

$(openBtn).click(function(){
      document.body.style.overflow='hidden'; /* Убираю скролл окна */
      $(madalWindow).fadeIn(100);
      animation(modalContent);
    });
    $(closeBtn).click(function(){
      animationBack(modalContent);
      $(madalWindow).fadeOut(100);
      document.body.style.overflow='scroll'; /* Обратно добавляю скролл */
    });

Comments

[Александр]

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

[qfrontend]

Вы имеете в виду узнать ширину скролла?

[Ihor Bratukh]

qfrontend, вот например функция из плагина модального окна remodal, возвращает ширину scrollbar'а:

/**
 * Returns a scrollbar width
 * @private
 * @returns {Number}
 */
function getScrollbarWidth() {
	if ($(document).height() <= $(window).height()) {
		return 0;
	}

	var outer = document.createElement('div');
	var inner = document.createElement('div');
	var widthNoScroll;
	var widthWithScroll;

	outer.style.visibility = 'hidden';
	outer.style.width = '100px';
	document.body.appendChild(outer);

	widthNoScroll = outer.offsetWidth;

	// Force scrollbars
	outer.style.overflow = 'scroll';

	// Add inner div
	inner.style.width = '100%';
	outer.appendChild(inner);

	widthWithScroll = inner.offsetWidth;

	// Remove divs
	outer.parentNode.removeChild(outer);

	return widthNoScroll - widthWithScroll;
}