JQuery mouse wheel stops spreading

Question

How to stop distribution using mousewheel event listener?

When you use the mouse wheel over the content element, the entire document also scrolls.

This does not work:

 content.on('mousewheel', function(e, delta){ content.scrollTop(content.scrollTop() - (40 * delta)); set_bar(); e.stopPropagation(); }); 

solution

decision

 content.on('mousewheel', function(e, delta){ content.scrollTop(content.scrollTop() - (40 * delta)); set_bar(); return false; }); 

Answer 1

I think you are confusing stopPropgation and preventDefault.

• stopPropagation stops the event from event chain bubbles.

• preventDefault prevents the default action on an item. In this case, this will prevent scrolling; for the click event, the anchor, for example, it will stop the link, which will lead you to the URL specified in the href attribute.

• return false , on the other hand, does both of these things.

Its important difference is that you can use a pop-up event to delegate events while preventing the default action.

For more information, see these two messages:

Difference between preventDefault and false return

Difference between preventDefault and stopPropagation

Answer 2

The original solution is very close .
Here's what worked:

  $(".myScrollableDiv").on("mousewheel",function(e) { var scrollRate = 100; var $t = $(this); var dy = e.originalEvent.deltaY * scrollRate; $t.scrollTop($t.scrollTop() + dy); e.preventDefault(); }); 

I think the main reason is that jQuery does not give us the second parameter (delta), but it can be found in the event itself. Otherwise, this is normal.