在所有浏览器中为我的网站启用平滑滚动

Question

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?

Answer 1

I found two jQuery plugins that may do what you want.

Simplr-SmoothScroll // Source: SE Question

jQuery SmoothWheel

Hope this helps.

---

edit: Struck out SmoothWheel because of comments - it hasn't been updated in ages, and SmoothScroll seems well maintained.

Answer 2

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.

Answer 3

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);
};

http://jsfiddle.net/ubawR/4/

Answer 4

对于chrome只试试这个 - https://github.com/im4aLL/chromeSmoothScroll只有1 KB

Answer 5

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();
});

Answer 6

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.

Answer 7

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