There seems to be a few glitches with some jquery I'm working with. I've attempted a fix…having no luck. Hopefully the experts here can provide some assistance. Thank you.
Problem
The animation flickers/stutters when scrolling the page too fast or at a continuous rate.
Attempted Fix
Added .stop() to prevent animation queue buildup Failed to solve the issue
Goal
Prevent the flicker/stutter during excessive scrolling
I didn't experience a flicker with your example. Perhaps you need to throttle your scrolling event so that it doesn't fire too often. Take a look at this to learn more about throttling:
http://benalman.com/projects/jquery-throttle-debounce-plugin/
Add this:
return false;
to the last line of scrollThis(). When you use mousewheel, you need to return false if you don't want the user's action to actually move the scrollbar. What's happening in your code, is when the user scrolls the mouse wheel, the scrollbar is moving and your javascript is firing. You just want your javascript to fire and ignore the native behavior.
var lastAnimation = 0;
var animationTime = 600; // in ms
var quietPeriod = 0; // in ms, time after animation to ignore mousescroll
function scrollThis(event, delta, deltaX, deltaY) {
var timeNow = new Date().getTime();
// change this to deltaX/deltaY depending on which
// scrolling dir you want to capture
deltaOfInterest = deltaY;
if (deltaOfInterest == 0) {
// Uncomment if you want to use deltaX
// event.preventDefault();
return;
}
// Cancel scroll if currently animating or within quiet period
if(timeNow - lastAnimation < quietPeriod + animationTime) {
event.preventDefault();
return;
}
if (deltaOfInterest < 0) {
if ($('.active').next('div').length) {
lastAnimation = timeNow;
$('.active').removeClass('active').next('div').addClass('active');
$('html,body').stop().animate( {
scrollTop: $('.active').offset().top -=20 }, animationTime);
}
} else {
if ($('.active').prev('div').length) {
lastAnimation = timeNow;
$('.active').removeClass('active').prev('div').addClass('active');
$('html,body').stop().animate( {
scrollTop: $('.active').offset().top -=20 }, animationTime);
}
}
return false;
}
$(document).mousewheel(scrollThis);
Hello Everyone,
There seems to be a few glitches with some jquery I'm working with. I've attempted a fix…having no luck. Hopefully the experts here can provide some assistance. Thank you.
Problem The animation flickers/stutters when scrolling the page too fast or at a continuous rate.
Attempted Fix Added .stop() to prevent animation queue buildup Failed to solve the issue
Goal Prevent the flicker/stutter during excessive scrolling
Sample http://jsfiddle.net/Sg8JQ/147/embedded/result/
Anyone with a hint for solving this?
I didn't experience a flicker with your example. Perhaps you need to throttle your scrolling event so that it doesn't fire too often. Take a look at this to learn more about throttling: http://benalman.com/projects/jquery-throttle-debounce-plugin/
Add this:
return false;to the last line of scrollThis(). When you use mousewheel, you need to return false if you don't want the user's action to actually move the scrollbar. What's happening in your code, is when the user scrolls the mouse wheel, the scrollbar is moving and your javascript is firing. You just want your javascript to fire and ignore the native behavior.Thanks for the replies.
@DustinWoods
Is this the correct method for return false?
var lastAnimation = 0; var animationTime = 600; // in ms var quietPeriod = 0; // in ms, time after animation to ignore mousescroll function scrollThis(event, delta, deltaX, deltaY) { var timeNow = new Date().getTime(); // change this to deltaX/deltaY depending on which // scrolling dir you want to capture deltaOfInterest = deltaY; if (deltaOfInterest == 0) { // Uncomment if you want to use deltaX // event.preventDefault(); return; } // Cancel scroll if currently animating or within quiet period if(timeNow - lastAnimation < quietPeriod + animationTime) { event.preventDefault(); return; } if (deltaOfInterest < 0) { if ($('.active').next('div').length) { lastAnimation = timeNow; $('.active').removeClass('active').next('div').addClass('active'); $('html,body').stop().animate( { scrollTop: $('.active').offset().top -=20 }, animationTime); } } else { if ($('.active').prev('div').length) { lastAnimation = timeNow; $('.active').removeClass('active').prev('div').addClass('active'); $('html,body').stop().animate( { scrollTop: $('.active').offset().top -=20 }, animationTime); } } return false; } $(document).mousewheel(scrollThis);Are you just having words scroll across the screen? If so, I'll post what I use when I get home.
@NSR, Yep! You got it! That should work.
@dustinwoods
Hey…thanks!
If you have a chance would you mind looking at a similar thread I started? http://css-tricks.com/forums/discussion/21422/multiple-keydown-events-fire-while-holding-down-key-too-long-please-help#Item_4