Задать вопрос
dzheka3d
@dzheka3d
javascript

Как правильно запретить скролл страницы при модальном окне?

Всем привет! Во время открытия модального окна выполняю такой код:
$("html,body").css("overflow","hidden");
При закрытии окна такой:
$("html,body").css("overflow","auto");

Но после закрытия страница уже не листается так плавно как должна. А именно останавливается, если листать вниз, а затем резко листнуть вверх.
  • Вопрос задан
  • 411 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 2
@GrimJack
Возможно у вас есть какие-то плагины влияющие на это
Попробуйте перед оверфлоу хайден записать текущее состояние оверфлоу, а потом скрывать
А при закрытии присваивать записанное состояние
Ответ написан
Комментировать
Комментировать
bingo347
@bingo347 Куратор тега JavaScript
Crazy on performance... 
<body>
  <div class="page-wrap">

  </div>
  <div class="modal-wrap"></div>
</body>

html, body {
  width: 100%;
  height: 100%;
}
body {
  overflow: hidden;
}
.page-wrap, .modal-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
}
.page-wrap: {
  overflow: auto; /* или scroll */
}
.modal-wrap {
  z-index: 1000;
  display: none;
  background: rgba(0,0,0, 0.5); /* стекло */
}
.modal-wrap__active {
  display: block; /* или flex */
}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Чат бот телеграмм-python
28 нояб. 2024, в 05:21
2000 руб./за проект
Проверить программу Python
28 нояб. 2024, в 05:18
500 руб./за проект
Разработка простого C++ Плагина After Effects
28 нояб. 2024, в 03:51
3500 руб./за проект
Ещё заказы