Johnny07
@Johnny07

Блокировка скроллинга страницы при скроллинге дочернего DIV`a?

Есть чат с фиксированным позиционированием, визуально отображается поверх страницы, мне необходимо заблокировать скроллинг страницы, в тот момент, когда скроллинг внутри чата доходит до верхнего или нижнего предела, сейчас при прокрутке колесиком мыши сообщений чата по достижении начала или конца начинает прокручиваться весь сайт.

Пожалуйста, не предлагайте скрывать скролл-бар:
body { overflow: hidden; }

Мне необходимо заблокировать скроллинг, когда курсор мыши находится над чатом.

Для наглядности прикладываю скрин чата с сайта:

a9103fbcc79c489da294d6c968067ff2.png
  • Вопрос задан
  • 6588 просмотров
Пригласить эксперта
Ответы на вопрос 2
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
Сам неделю назад решал подобную проблему, когда необходим был скролл внутри кастомного попапа, с блокировкой скролла самой страницы. Оказалось, что если вариант с overflow: hidden; не подходит по эстетическим соображениям из-за моментально меняющей ширины страницы (пропажа скроллбара), то придется пилить велосипед. Тут реализована блокировка скролла, которая позволяет скроллить внутри контейнера, если в направлении скролла есть чего еще скроллить. То есть если убрать строчки с st > 0 (и подобной для конца скролла) , то глобальная страница будет скроллится, когда скролл попапа будет доходить до конца/начала. Ну а $(e.target).closest(popUpClass).length соответственно проверяет, находитесь ли вы внутри попАпа в общем плане, чтобы не блокировался весь скролл вообще. Ах да, тут еще блокируются клавиши для скроллинга, кроме пробела, чтобы в инпутах печатать можно было.
Получилось примерно такое:
var scrollKeys = [33,34,35,36,38,40];
var popUpClass = ".%класс-активного-попАпа%";

function preventScroll() {
  $(document).on("mousewheel DOMMouseScroll", "body", function(e) {
    var $np = $(popUpClass)[0];
    var st = $np.scrollTop;
    if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
      if ($(e.target).closest(popUpClass).length && 
          st > 0) return;
    } else {
      if ($(e.target).closest(popUpClass).length && 
          st + $np.offsetHeight < $np.scrollHeight) return;
    }
    e.preventDefault();
    e.stopPropagation();
  });

  $(document).on("keydown", function(e) {
    if (scrollKeys.indexOf(e.which) > -1) {
      e.preventDefault();
    }
  });
};

function returnScroll() {
  $(document).off("mousewheel DOMMouseScroll keydown");
};

// если необходимо делегирование событий, замените на mouseenter и mouseleave соответственно
$(popUpClass).hover(function() {
  preventScroll();
}, function() {
  returnScroll();
});
Ответ написан
andykov
@andykov
Shit happens
Решение которое отключает скролл, но при этом скролл бар не скрывается. Адаптируйте под свою задачу.
Ответ написан
Ваш ответ на вопрос

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

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