Как запретить прокрутку body, когда курсор прокручивает overflow hidden?

Question

[Сергей вопросов]

Здравствуйте, вопрос такой:

Имеется страница, body соответственно имеет полосу прокрутки справа.
Внутри body имеется div блок с overflow: auto, в котором также присутствует полоса прокрутки.

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

Как запретить body прокручиваться, когда прокручиваешь контент в блоке?

Нашел вот такое решение, идеально подходит plnkr.co/edit/30N5iZWKDSOqRUatESx3?p=preview но по какой-то причине не работает с div блоками (заменял e.target.tagName на e.target.hasClass)

Comments

[Сергей delphinpro]

e.target.hasClass

у html-элементов нет такого метода вроде бы?

e.target.classList.contains('some-class')

[Сергей вопросов]

Сергей,

document.onwheel = function(e) {
  if (e.target.classList.contains != 'scrolltheme') return;
  var area = e.target;

  var delta = e.deltaY || e.detail || e.wheelDelta;

  if (delta < 0 && area.scrollTop == 0) {
    e.preventDefault();
  }

  if (delta > 0 && area.scrollHeight - area.clientHeight - area.scrollTop <= 1) {
    e.preventDefault();
  }
};

Не работает :(

[Сергей вопросов]

Константин Остроухов, это совсем банально. При наведении на блок, когда будет к body добавляться overflow: hidden - страница будет дергаться вправо т.к. будет убираться ползунок.

Даже если стилизовать ползунок, задать ему ширину например 12px, а при наведении на блок делать body padding right 12px - все равно в некоторых браузерах, например safari будет дерганье т.к. не все браузеры поддерживают стилизацию ползунка и у всех разная его ширина.

Answer 1

[Rid]

https://jsfiddle.net/riddirect/dr4kkr4L/

Answer 2

[Max Donchenko]

Решение в лоб:
Вешаешь на блок, содержащий список товаров, лиснеры onMouseOver и onMouseOut, которые, соответственно, добавляют/убирают у "body" CSS класс "scroll-disallowed" (или любой подобный) с правилом "overflow-hidden".

function goodsContainerMouseOverHandler() {
    document.body.classList.add('scroll-disallowed');
}
function goodsContainerMouseOutHandler() {
    document.body.classList.remove('scroll-disallowed');
}
goodsContainer.addEventListener("mouseover", goodsContainerMouseOverHandler);
goodsContainer.addEventListener("mouseout", goodsContainerMouseOutHandler);

Пример