I'm developing a parallax scrolling website using the Stellar and Skrollr libraries. The website behaves perfectly in Firefox because of Firefox's smooth scrolling feature, but in Chrome, scrolling with the mouse wheel is jerky, and the parallax effect is almost ruined. Is there any way to get the smooth scrolling with the mouse wheel in all browsers while maintaining performance?
I found two jQuery plugins that may do what you want.
Simplr-SmoothScroll // Source: SE Question
Hope this helps.
edit: Struck out SmoothWheel because of comments - it hasn't been updated in ages, and SmoothScroll seems well maintained.
If you are Cargo cult programmer, go with jQuery. Proceed only if you are Real programmer.
Screw jQuery.animate(), understand the math behind and pick an algorithm. Robert Penner has a nice demo, I picked EaseOutQuad.
Read how to handle mouse wheel cross-browser style here, then do some more reading.
In this code, I choose not to support IE 8 and older. The idea is to hook up the wheel event, prevent it (since the default behavior is jerky jump) and perform own smooth jump
Math.easeOutQuad = function (t, b, c, d) { t /= d; return -c * t*(t-2) + b; };
(function() { // do not mess global space
var
interval, // scroll is being eased
mult = 0, // how fast do we scroll
dir = 0, // 1 = scroll down, -1 = scroll up
steps = 50, // how many steps in animation
length = 30; // how long to animate
function MouseWheelHandler(e) {
e.preventDefault(); // prevent default browser scroll
clearInterval(interval); // cancel previous animation
++mult; // we are going to scroll faster
var delta = -Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); // cross-browser
if(dir!=delta) { // scroll direction changed
mult = 1; // start slowly
dir = delta;
}
// in this cycle, we determine which element to scroll
for(var tgt=e.target; tgt!=document.documentElement; tgt=tgt.parentNode) {
var oldScroll = tgt.scrollTop;
tgt.scrollTop+= delta;
if(oldScroll!=tgt.scrollTop) break;
// else the element can't be scrolled, try its parent in next iteration
}
var start = tgt.scrollTop;
var end = start + length*mult*delta; // where to end the scroll
var change = end - start; // base change in one step
var step = 0; // current step
interval = setInterval(function() {
var pos = Math.easeOutQuad(step++,start,change,steps); // calculate next step
tgt.scrollTop = pos; // scroll the target to next step
if(step>=steps) { // scroll finished without speed up - stop animation
mult = 0; // next scroll will start slowly
clearInterval(interval);
}
},10);
}
// nonstandard: Chrome, IE, Opera, Safari
window.addEventListener("mousewheel", MouseWheelHandler, false);
// nonstandard: Firefox
window.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
})();
As you can see in this demo, I prefer as little easing as possible, just to avoid jerky scrolling. Read the comments above and design your own scrolling which suits your project.
Note: mousewheel also hooks to touchpad, but not to up/down keys. You should consider to hook key events, too.
I had not a lot of time, but I tried to write a (cross browser & dirty) smooth scrolling functionality on the fly. When you stop scrolling it smoothly decelerates. You can rewrite it a little bit so it fits your needs.
Give it a try here:
Smooth scrolling:
function getScrollTop(){
if(typeof pageYOffset!= 'undefined'){
//most browsers except IE before #9
return pageYOffset;
} else {
var B = document.body; //IE 'quirks'
var D = document.documentElement; //IE with doctype
D = (D.clientHeight) ? D : B;
return D.scrollTop;
}
}
var timeouts = [];
var scrolling = false;
var scroller;
var scrollTop = getScrollTop();
var timeMs;
var alter = false;
var speed = 5;
window.onscroll = function() {
if(alter) {
var timeDif = new Date().getMilliseconds() - timeMs;
speed = 5 - (timeDif / 50);
console.log(speed);
}
timeMs = new Date().getMilliseconds();
alter = !alter;
var scrollDirection = getScrollTop() - scrollTop;
scrollDirection = scrollDirection / Math.abs(scrollDirection);
scrollTop = getScrollTop();
clearTimeout(scroller);
scroller = setTimeout(function(){
console.log('smooth scrolling active');
if(!scrolling) {
timeouts.length = 0;
scrolling = true;
var steps = 50;
var delay = 6;
for(var i = 0; i < steps; i++) {
(function(i){
var timeout = setTimeout(function(){
var perc = i / steps;
var val = (perc == 1) ? 1 : (-Math.pow(2, -10 * perc) + 1);
var scrollY = val * speed * scrollDirection;
window.scrollTo(0, getScrollTop() + scrollY);
setTimeout(function(){
if(i == (steps - 1)) scrolling = false;
}, steps * delay);
}, (i * delay));
timeouts.push(timeout);
})(i);
}
}
}, 50);
};
for chrome only try this - https://github.com/im4aLL/chromeSmoothScroll only 1 KB
Simplr-SmoothScroll have one bug - it is not working with body, when body height is not auto.
I found another plugin and it is became perfect solution for me. https://github.com/inuyaksa/jquery.nicescroll
download library (demo) and add to the begining
// 1. Simple mode, it styles document scrollbar:
$(document).ready(function() {
$("body").niceScroll();
});
Basically scroll causes jerky because of repaints and reflows. if you can check and reduce those reflows you might get the scroll performance.
and check the onScroll event callback function whether its executing any expensive logic . and are there any memory leakage.
Chrome developer tool bar heap snap shot will be useful for detecting memory leaks and to see repaints and reflows.
w3schools has provided a super simple JQuery code to give all anchor tags smooth scrolling effect.
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
Here comes the demo: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll
来源：https://stackoverflow.com/questions/19349245/enable-smooth-scrolling-for-my-website-in-all-browsers