2

I'm using CSS3 to 'slide' a div up and down according to scroll direction. I'm using the mouse wheel event to track the user's scrolling and when a user scrolls down the div slides up with a CSS3 transition. However, I need to change the sensitivity of the mouse wheel/trackpad. Now, when I turn the wheel down only one 'tick', the event already gets fired. On a trackpad (Macbook) only a millimetre of double-finger movement fires the event and the animation gets called many times (way too sensitive). I need to be able to specify a minimum number of mouse wheel rotations/double-finger-swipe-distance to make sure the animation isn't fired to quickly.

Here's the code I have now:

$leftSide.bind('DOMMouseScroll mousewheel', function(e) {
    if (scrollStep > 0 || scrollStep < $numberOfItems) {
        $leftSide.css({
            marginTop: scrollStepPixelsString,
            WebkitTransition: 'margin-top 700ms ease-in-out',
            MozTransition: 'margin-top 700ms ease-in-out',
            MsTransition: 'margin-top 700ms ease-in-out',
            OTransition: 'margin-top 700ms ease-in-out',
            transition: 'margin-top 700ms ease-in-out'
        });
    }
});

How can I reduce the mouse wheel and trackpad sensitivity?

erol_smsr
  • 1,454
  • 4
  • 24
  • 49

1 Answers1

1

You could try using the 'debounce function' to delay the execution of the function for x miliseconds since the last time it was called.

loelu
  • 85
  • 10
  • Also this post has a lot on the subject: http://stackoverflow.com/questions/7408100/can-i-change-the-scroll-speed-using-css-or-jquery and NiceScroll might be another option: http://areaaperta.com/nicescroll/demo.html – Nathaniel Flick Jan 06 '17 at 16:27
  • Awesome answer. I've used debounce and throttling before, but couldn't think about it this time. Thanks :) – erol_smsr Jan 06 '17 at 16:36