I am currently utilizing CSS3 to smoothly move a div up and down based on the direction of scrolling. By monitoring the mouse wheel event, I can detect when a user scrolls down and trigger a CSS3 transition to slide the div up. However, I am encountering an issue with the sensitivity of the mouse wheel/trackpad input. Even a slight movement of the wheel or trackpad triggers the event prematurely. For example, on a Macbook's trackpad, a small double-finger swipe causes the animation to be called multiple times due to its high sensitivity. Is there a way for me to set a minimum threshold for the number of mouse wheel rotations or trackpad swipes required before triggering the animation?
Below is the current code snippet I am using:
$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'
});
}
});
Is there a way to adjust the sensitivity of the mouse wheel and trackpad in this scenario?