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

Question

[Johnny07]

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

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

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

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

Answer 1

[Nikolay Talanov]

Сам неделю назад решал подобную проблему, когда необходим был скролл внутри кастомного попапа, с блокировкой скролла самой страницы. Оказалось, что если вариант с 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();
});

Comments

[Johnny07]

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

[Johnny07]

Видимо ваш метод хорош только для попапа, но все же большое спасибо.

[Nikolay Talanov]

Johnny07: Я только сейчас заметил, что у вас там используется кастомный скроллбар. Конкретно в моем случае юзался нативный, по этому я легко отслеживал его положение и все работало идеально. В вашем случае надо танцевать от логики работы этого скроллбара, ведь любой кастомный скроллбар по сути дела является огромным таким костылем. Сам как то писал свой кастомный горизонтальный скроллбар, никому такого зла не посоветую :)

[Johnny07]

Nikolay Talanov: скролл-бар нативный, но он скрыт и добавлен визуальный с помощью плагина baron. Я заменял нативный и отключал события для скролла, когда курсор мыши над чатом, работало как мне нужно, но работал криво и не кросбраузерно, пришлось отказаться.

[Johnny07]

Осталась одна идея, вывести чат через iframe, у меня так popup`ы работали, когда необходимо было реализовать, как ВК, popap прокручивался, а на основная страница оставалась неподвижна, но о поддержке древних браузеров можно забыть.

Answer 2

[Андрей Б.]

Решение которое отключает скролл, но при этом скролл бар не скрывается. Адаптируйте под свою задачу.

Comments

[Johnny07]

Спасибо, попробую, но предчувствие что отрубится весь скролл включая чат.