平滑滚动普通javascript - Safari工作firefox没有

时间:2018-05-08 21:04:38

标签: javascript firefox scroll smoothing

自2018年8月起修订 - 现在更优雅,减速和减速。 现在在mozilla和safari中进行测试。

我设计了这个脚本使用“requestAnimFrame(callback)”对象来平滑滚动没有库,它可以正常使用safari而不是使用firefox,无法解决原因。

回调被间接调用 - 通过包装函数传递其他参数(除了时间戳)。

/*
 * smoothScroll to a supplied target using "requestAnimationFrame"
 */
var starttime,         // start of animation
 runtime,               // animation duration
 distance,              // distance of the target in reference to the viewport top
 docpos,                // distance document top to viewport top 
 delta,                  // distance left to scroll till target reached
 step,                   // travelled distance
 correct=10,          // correct y destination position
 t=900,                 // absolute duration 
 v,            
 a=0.001;

//wrapper function, necessary for passing arguments with requestAnimationFrame to the real callback function -> smoothScroll

function wrapsmoothScrl(callback, id, target){                           
      return function(timestamp){
            callback(id, target, timestamp);
      };
}
function smoothScroll(id, target, timestamp){
     $(id).addEventListener("click", function(event){event.preventDefault();});
     if (!starttime) starttime=timestamp;
     if (!distance) distance=$(target).getBoundingClientRect().top;
     if (!docpos) docpos=window.pageYOffset;

     v=Math.abs(distance)/t;
     runtime=timestamp-starttime;

     step=runtime<(t/2)?(v+a*runtime)*runtime:((v+a*t/2)-a*(runtime-t/2))*runtime;
     step=distance>0?step:step*(-1);
     document.documentElement.scrollTop=docpos+step;    // for mozilla
     document.body.scrollTop=docpos+step;                     // for safari (and others?)

     delta=$(target).getBoundingClientRect().top;
     if (distance>0 && delta>correct || distance<0 && delta<correct){
            var animReq1=window.requestAnimationFrame(wrapsmoothScrl(smoothScroll, id, target));
     } else {window.cancelAnimationFrame(animReq1); starttime=null; distance=null; docpos=null;}
}

0 个答案:

没有答案