How can I prevent the body scrolling when the cursor scrolls the overflow hidden?

Hello, the question is this:

There is a page body, respectively, and has a scroll bar on the right.
Inside the body there is a div block with overflow: auto, which also has a scroll bar.

When you hover the mouse on this unit and begin to turn the mouse wheel down, then when the end of the scroll the contents of the block starts scrolling the entire body as a whole.

How to disable the body scroll when I scroll the content in the block?

I found this solution, ideal plnkr.co/edit/30N5iZWKDSOqRUatESx3?p=preview but for some reason is not working with div blocks (replaced e.target.tagName e.target.hasClass)

2017-10-07_155950.png
June 14th 19 at 19:06
2 answers
June 14th 19 at 19:08
June 14th 19 at 19:10
The decision in a forehead:
Hang on the block containing the list of products that linery onMouseOver and onMouseOut, which respectively add/remove the "body" CSS class "scroll-disallowed" (or any similar) with a rule "overflow-hidden".
goodsContainerMouseOverHandler function() {
document.body.classList.add('scroll-disallowed');
}
goodsContainerMouseOutHandler function() {
document.body.classList.remove('scroll-disallowed');
}
goodsContainer.addEventListener("mouseover", goodsContainerMouseOverHandler);
goodsContainer.addEventListener("mouseout", goodsContainerMouseOutHandler);


Example

Find more questions by tags CSSJavaScriptjQuery