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

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

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

Но после закрытия страница уже не листается так плавно как должна. А именно останавливается, если листать вниз, а затем резко листнуть вверх.
  • Вопрос задан
  • 407 просмотров
Комментировать
Подписаться 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 разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Спроектировать дизайн сводной SEO таблицы
19 апр. 2024, в 15:20
5000 руб./за проект
Настройка шаблона
19 апр. 2024, в 15:01
35000 руб./за проект
Разработать телеграмм бота для анонимных сообщений
19 апр. 2024, в 14:53
30000 руб./за проект
Ещё заказы