@newhacke

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

Я думаю все начинающие сталкивались с подобными проблема, я вот сутки просидел над тем, что бы исключить дерганье общего контента, при отрытии модального окна, либо меню с фоном ( любое действие которое влечет открытие какого то блока с position absolute, во весь экран.
Проблема ясна. Пропадает скрол по оси Y, и за счет этого контент сдвигается. Но как сделать так что бы модальное окно или мобильное меню при октрытии, а именно при появлении этого блока с позиционированием абсолют во весь экран не дергал страницу.. Много всего перепробовал ничего не получается. Помогитееееее пожалуйста, какие решение как разобраться и как решить проблему.
  • Вопрос задан
  • 302 просмотра
Решения вопроса 1
rasschitai
@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);
};
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
чем решение того же bootstrap не нравится? они для body padding задают
https://getbootstrap.com/docs/4.4/components/modal...
Ответ написан
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
CEO iAmStudio, предприниматель.
Ты описал дефолтное поведение открывашки модального окна на Bootstrap. Там задается overflow: hidden; для body в момент открытия окна, чтобы предотвратить прокрутку контента одновременно с прокруткой модального окна.

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

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

ЗЫ: при открытии модального окна это наиболее правильное поведение страницы, можно разве что, если тебя это сильно смущает задать поведение элементам страницы по transition свойству (не рекомендую).
Ответ написан
sashabeep
@sashabeep
Дней без вопросов про Slick на тостере : 0
1. Никто не мешает не выключать прокрутку страницы, просто поверх нее положить шторку с position:fixed. и уже поверх нее попап.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы