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

Question

我正在使用Stellar和Skrollr库开发一个视差滚动网站.由于Firefox的平滑滚动功能,该网站在Firefox中表现完美,但在Chrome中,使用鼠标滚轮滚动是生涩的,并且视差效果几乎被破坏.在保持性能的同时,有没有办法在所有浏览器中使用鼠标滚轮进行平滑滚动？

Answer 1

我找到了两个可以做你想做的jQuery插件.

Simplr-SmoothScroll //来源:SE问题

jQuery SmoothWheel

希望这可以帮助.

编辑:因为评论而导致SmoothWheel消失 - 它已经很久没有更新了,并且SmoothScroll似乎得到了很好的维护.

Answer 2

如果您是Cargo cult程序员,请使用jQuery.只有你是真正的程序员才能继续.

拧紧jQuery.animate(),了解背后的数学并选择算法.Robert Penner 有一个很好的演示,我选择了EaseOutQuad.

了解如何处理鼠标滚轮跨浏览器的风格在这里,然后做一些更多的阅读.

在此代码中,我选择不支持IE 8及更早版本.想法是挂钩轮子事件,防止它(因为默认行为是跳跃的跳跃)并执行自己的平滑跳跃

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

正如您在本演示中所看到的,我更喜欢尽可能少的缓动,只是为了避免生涩的滚动.阅读上面的评论并设计适合您项目的滚动.

注意:鼠标滚轮也可以挂钩到触摸板,但不能挂到上/下键.你也应该考虑挂钩关键事件.