Javascript 如何使用requestAnimationFrame实现平滑滚动？

我想在我的网页上制作一个好的平滑滚动效果，我发现最好的方法之一就是使用requestAnimationFrame

我找到了Jed Schmidt的polyfill：

这是保罗·爱尔兰的作品：

但老实说，我不知道如何使用它来创建平滑效果。在过去，我检查了一些插件：nicescroll（我不喜欢它，因为它改变了滚动条的样式）、smoothscroll.js（这一个只适用于Chrome），还有一些只适用于mousewheel的插件，但当你点击Re-Pag、Av-Pag、spacebar等时就不起作用了

我可以在这个页面上提供一个例子：滚动效果非常好，工作效率很高。它也是跨浏览器的！但看看它的JS代码，我只看到了一个巨大的视差函数，我不确定我想要的是否是这个函数

你能告诉我从哪里开始吗？我会在这里更新进度

PD：事实上，我花了一天的时间试图通过将复制粘贴到scripts.js文件中的无意义操作来实现它。我不是JS方面的专家，但我推断这很难做到

编辑1:我已经有东西了。首先，polyfill：

(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
                               || window[vendors[x]+'CancelRequestAnimationFrame'];
}

if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function() { callback(currTime + timeToCall); },
          timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    };

if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
    };
}());

（函数（）{
var lastTime=0；
var供应商=['ms'，'moz'，'webkit'，'o']；
对于（var x=0；x

以及平滑的鼠标滚轮：

var html = document.documentElement;
var rAF, target = 0, scroll = 0;

onmousewheel = function (e) {
e.preventDefault();
var scrollEnd = html.scrollHeight - html.clientHeight;
target += (e.wheelDelta > 0) ? -70 : 70;
if (target < 0)
    target = 0;
if (target > scrollEnd)
    target = scrollEnd;
if (!rAF)
    rAF = requestAnimationFrame(animate);
};

onscroll = function () {
if (rAF)
    return;
target = pageYOffset || html.scrollTop;
scroll = target;
};

function animate() {
scroll += (target - scroll) * 0.1;
if (Math.abs(scroll.toFixed(5) - target) <= 0.47131) {
    cancelAnimationFrame(rAF);
    rAF = false;
}
scrollTo(0, scroll);
if (rAF)
    rAF = requestAnimationFrame(animate);
}

var html=document.documentElement；
var rAF，目标=0，滚动=0；
onmouseheel=功能（e）{
e、 预防默认值（）；
var scrollEnd=html.scrollHeight-html.clientHeight；
目标+=（e.wheelDelta>0）？-70:70；
如果（目标<0）
目标=0；
如果（目标>滚动结束）
目标=结束；
如果（！rAF）
rAF=请求动画帧（动画）；
};
onscroll=函数（）{
英国皇家空军
返回；
target=pageYOffset | | html.scrollTop；
滚动=目标；
};
函数animate（）{
滚动+=（目标-滚动）*0.1；
如果（Math.abs（scroll.toFixed（5）-target）我有办法按照我的预期做到这一点：

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

// MIT license
(function () {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame']
        || window[vendors[x] + 'CancelRequestAnimationFrame'];
}

if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function (callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function () {
            callback(currTime + timeToCall);
        },
            timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    };

if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function (id) {
        clearTimeout(id);
    };
}());


('ontouchend' in document) || jQuery(function($){

var scrollTop = 2, tweened = 0, winHeight = 0, ct = [], cb = [], ch = [], ph = [];
var wrap = $('#wrap').css({position:'fixed', width:'100%', top:0, left:0})[0];
var fake = $('<div>').css({height: wrap.clientHeight}).appendTo('body')[0];

var update = function(){
        window.requestAnimationFrame(update);
        if(Math.abs(scrollTop-tweened) > 1){
            var top = Math.floor(tweened += .25 * (scrollTop-tweened)),
                bot = top + winHeight, wt = wrap.style.top = (top*-1) + 'px';

            for(var i = plax.length; i--;)if(cb[i] > top && ct[i] < bot){
                plax[i].style.top = ((ct[i] - top) / Math.max(ph[i] - ch[i], winHeight - ch[i]) * (ch[i] - ph[i])) + 'px';
            }
        }
    };

var listen = function(el,on,fn){(el.addEventListener||(on='on'+on)&&el.attachEvent)(on,fn,false);};
var scroll = function(){scrollTop = Math.max(0, document.documentElement.scrollTop || window.pageYOffset || 0);};

listen(window, 'scroll', scroll);
update();
});

//http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
//Erik Möller的requestAnimationFrame polyfill。来自Paul Irish和Tino Zijdel的修复
//麻省理工学院执照
（功能（）{
var lastTime=0；
var供应商=['ms'，'moz'，'webkit'，'o']；
对于（var x=0；x1）{
var top=数学地板（斜纹花呢+=0.25*（滚动顶部斜纹花呢）），
bot=top+winHeight，wt=wrap.style.top=（top*-1）+“px”；
对于（var i=plax.length；i--；）if（cb[i]>top&&ct[i]

这是HTML结构：

<html>
    <body>
        <div id="wrap">
            <!-- The content goes here -->
        </div>
    </body>
</html>



它可以工作，但并不完美。例如，为用户启用WP管理栏，它会将内容放在管理栏下，并在页脚后留下空白