Question

I’m using this piece of code from a fellow SO user:

   $("#rightSubMenu").mousemove(function(e){
      console.log('executed');
      var h = $('#rightSubMenuScroller').height()+13;
      var offset = $($(this)).offset();
      var position = (e.pageY-offset.top)/$(this).height();
      if(position<0.33) {
         $(this).stop().animate({ scrollTop: 0 }, 1000);
      }
      else if(position>0.66) {
         $(this).stop().animate({ scrollTop: h }, 2000);
      }
      else
      {
         $(this).stop();
      }
   });

What it does, basically, is that it moves #rightSubMenuScroller, which is inside #rightSubMenu, whenever you hover over rightSubMenu. The problem is that with every pixel moved, it executes the whole function again resulting in a laggy animation.

When I activate the scrolling and move the mouse away from the element, the animation is nice.

I need to fix the code so that it doesn’t lag. Any ideas how?

Answer 1

You should add event.stopPropagation() at the end of this event call.

$("#rightSubMenu").mousemove(function(e){
  // You code...
  e.stopPropagation();
});

This will prevent the event bubbling up the DOM tree.

Alternatively and depending on your DOM structure, try event.stopImmediatePropagation() which keeps all other event handlers executing.