Как решается проблема с дерганьем всего контента при открытии модального окна?

Question

[newhacke]

Я думаю все начинающие сталкивались с подобными проблема, я вот сутки просидел над тем, что бы исключить дерганье общего контента, при отрытии модального окна, либо меню с фоном ( любое действие которое влечет открытие какого то блока с position absolute, во весь экран.
Проблема ясна. Пропадает скрол по оси Y, и за счет этого контент сдвигается. Но как сделать так что бы модальное окно или мобильное меню при октрытии, а именно при появлении этого блока с позиционированием абсолют во весь экран не дергал страницу.. Много всего перепробовал ничего не получается. Помогитееееее пожалуйста, какие решение как разобраться и как решить проблему.

Answer 1

[rasschitai]

лови из проверенного, дальше думаю 2+2 сложишь

function getScrollWidth(){

	var inner=document.createElement('p');
	inner.style.width="100%";
	inner.style.height="200px";

	var outer=document.createElement('div');
	outer.style.position="absolute";
	outer.style.top="0px";
	outer.style.left="0px";
	outer.style.visibility="hidden";
	outer.style.width="200px";
	outer.style.height="150px";
	outer.style.overflow="hidden";
	outer.appendChild(inner);

	document.body.appendChild(outer);
	var w1=inner.offsetWidth;
	outer.style.overflow='scroll';
	var w2=inner.offsetWidth;

	if(w1==w2){
	
		w2=outer.clientWidth;
	}

	document.body.removeChild(outer);

	return (w1-w2);
};

Answer 2

[iBird Rose]

чем решение того же bootstrap не нравится? они для body padding задают
https://getbootstrap.com/docs/4.4/components/modal...

Comments

[newhacke]

спасибо большое) но ради одного только модального окна не хотелось бы использвать бутстрап, а есть како либо фиксированное значени? или там все сложно..?

[newhacke]

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

[iBird Rose]

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

Answer 3

[Арсений Матыцин]

Ты описал дефолтное поведение открывашки модального окна на Bootstrap. Там задается overflow: hidden; для body в момент открытия окна, чтобы предотвратить прокрутку контента одновременно с прокруткой модального окна.

Соответственно, что-о мне подсказывает, что ты используешь бут или другой фреймворк, который так делает, ибо новички до такой фичи редко догадываются.

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

ЗЫ: при открытии модального окна это наиболее правильное поведение страницы, можно разве что, если тебя это сильно смущает задать поведение элементам страницы по transition свойству (не рекомендую).

Comments

[newhacke]

спасибо друг ну да выражение в ногу себе самому выстрелить это про меня))

[Арсений Матыцин]

newhacke, кажется я уже даже запомнил тебя.

Answer 4

[sashabeep]

1. Никто не мешает не выключать прокрутку страницы, просто поверх нее положить шторку с position:fixed. и уже поверх нее попап.

2. Про то, что контент сдвигается - не очень понял, зачем этому придается так много внимания. Открою секрет: есть масса ОС, в которых скролл висит поверх содержимого окна и не влияет на его контент, да и может быть вообще не виден, пока мышь не подведена к краю окна. Поэтому выдумывать что-то из-за того, что в винде окно изменяется в размере на ширину скролла, сколько там, в районе 30 пикселей? Это 1,5% от ширины Full HD - достаточно тупо. Особенно, если учесть, что во время открытия окна показывается какая-то анимация, и пользователь видит, что окно перерисовывается.

У меня, например, вот так в настройках стоит, у кого-то стоит "всегда", в других осях вообще может быть скролла нет