JQuery Mousewheel doesn't support trackpad?
I am using the popular mousewheel plugin to emulate full page scrolling like this website .
jQuery(function() {
var top = 0,
viewport = jQuery(window).height(),
step = jQuery(".home .l-section:first").outerHeight(),
body = jQuery.browser.webkit ? jQuery('body') : jQuery('html'),
wheel = false;
jQuery('body').mousewheel(function(event, delta) {
wheel = true;
if (delta < 0) {
top = (top + viewport) >= jQuery(document).height() ? top : top += step;
body.stop().animate({
scrollTop: top
}, 400, function() {
wheel = false;
});
} else {
top = top <= 0 ? 0 : top -= step;
body.stop().animate({
scrollTop: top
}, 400, function() {
wheel = false;
});
}
return false;
});
jQuery(window).on('resize', function(e) {
viewport = jQuery(window).height();
step = jQuery(".home .l-section:first").outerHeight();
});
jQuery(window).on('scroll', function(e) {
if (!wheel) top = jQuery(this).scrollTop();
});
});
It works fine, but is NOT used when using a trackpad. Using the trackpad it just scrolls to the bottom of the page no matter how slowly I try to scroll.
source to share
Works well with my laptop trackpad. However, this is a known issue, have you tried using debounce?
function mouseHandle(event) {
newDate = new Date();
var scrollAllowed = true;
if( wheel < 10 && (newDate.getTime()-oldDate.getTime()) < 100 ) {
scrollPos -= event.deltaY*(10-wheel);
wheel++;
}
else {
if( (newDate.getTime()-oldDate.getTime()) > 100 ) {
wheel = 0;
scrollPos -= event.deltaY*60;
}
else {
scrollAllowed = false;
}
}
oldDate = new Date();
if( scrollAllowed ) {
// do your stuff here
}
}
//Apply this effect with jQuery On event
$('body').on('mousewheel', function(event) { mouseHandle(event); });
This has already been reported here: https://github.com/brandonaaron/jquery-mousewheel/issues/36
There you will get several solutions. Hope this helps. Help yourself :-)
World,
Rahul
source to share
I solved the tracking issue with date (), so the user cannot scroll anymore if the specific time I set was not in the past.
Here is my snippet using the "wheel" function
var last_time = new Date();
$(window).bind('wheel', function(event) {
var now = new Date();
if((now - last_time) >= 1200)//Miliseconds
{
if (event.originalEvent.deltaY <= 0) {
//Go up
}
else {
//Go down
}
last_time = new Date();
}
});
source to share
to anyone who finds it, the "mousewheel" event has been deprecated. https://developer.mozilla.org/en-US/docs/Web/Events/wheel
use the wheel event instead, you can use the originalEvent property on the wheel event to get the attributes you expect. (deltaX, deltaY, etc.)
source to share
I used the underscore debounce function to overcome this issue. This is the code I used.
$('...').mousewheel(_.debounce(function(event) {
event.preventDefault();
if(event.originalEvent.deltaY < 0){
/* do your stuff when scrolling up */
}else {
/* do your stuff when scrolling down */
}, 40,true));
source to share