Javascript軟滾動

我正在開發一個腳本來像智能手機一樣滾動頁面（觸摸屏幕）。我在jquery和jscrollto做了script。但我想在JavaScript純粹做。這是我的代碼。Javascript軟滾動

// ==UserScript== 
// @name  touchNavigation 
// @namespace here 
// @include  http://* 

// @version  0.1 
// @grant  none 

// ==/UserScript== 

document.body.addEventListener("mousedown", mouseDown); 
document.body.addEventListener("mouseup", mouseUp) 
var y0=0; 
var y1=0; 
var diferencia=0; 

function mouseDown(event) 
{ 
    y0=event.clientY; 
} 

function mouseUp(event) 
{ 
    var i; 
    y1=event.clientY; 
    diferencia=y1-y0; 


    if(diferencia>0){ 
     i=-10; 
     while(diferencia>0){ 
      setTimeout(desplazamiento, 250, i); 
      diferencia+=i; 
     } 
    }else{ 
     i=10; 
     while(diferencia<0){ 
      setTimeout(desplazamiento, 250, i); 
      diferencia+=i; 
     } 
    } 

} 

function desplazamiento(diferencia){ 


    window.scrollBy(0,diferencia); 

}

該腳本。但流離失所只是一步。它應該更柔和。

本節有什麼麻煩？

if(diferencia>0){ 
      i=-10; 
      while(diferencia>0){ 
       setTimeout(desplazamiento, 250, i); 
       diferencia+=i; 
      } 
     }else{ 
      i=10; 
      while(diferencia<0){ 
       setTimeout(desplazamiento, 250, i); 
       diferencia+=i; 
      } 
     }

來源

2013-01-06 Felipe Morales

您的動畫功能似乎是線性的。爲了平滑滾動，您需要某種曲線功能（例如，快速啓動，然後減慢速度）。另外，考慮'requestAnimationFrame'，因爲它應該給你更流暢的動畫。 –

好的建議。 –