使重复滚动更平滑，就像jQuery的动画scrollTop一样 [英] Make repeated scrollBy smoother like jQuery's animate scrollTop

问题描述

我怎样才能使重复的scrollBy调用变得更平滑，就像用jQuery的动画scrollTop进行动画处理时一样?

How can I make a repeated scrollBy call smoother like when animating with jQuery's animate scrollTop?

当前它是跳跃的，页面在不同的滚动位置之间来回跳转.如何使它更平滑?

Currently it is jumpy, the page jumps to and from the different scroll positions. How can I make it smoother?

这是可滚动的代码:

window.scrollBy(0, -10*(scrollCount ? scrollCount<0 ? -1 : 1 : 0)) , 600*x); })(i);

这是包含它的for循环:

And here is the for loop that contains it:

for(var i = 0; i < Math.abs(scrollCount); i++){
    (function(x){
        setTimeout(
        window.scrollBy(0, -10*(scrollCount ? scrollCount<0 ? -1 : 1 : 0))
       , 600*x); })(i);
    }
}

推荐答案

用法

首先将其添加到您的页面.

First add this to your page.

scrollByAnimated = function(scrollY, duration){
  var startTime = new Date().getTime();

  var startY = window.scrollY;
  var endY = startY + scrollY;
  var currentY = startY;
  var directionY = scrollY > 0 ? 'down' : 'up';

  var animationComplete;
  var count = 0;

  var animationId;

  if(duration === undefined){
    duration = 250;//ms
  }

  //grab scroll events from the browser
  var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x

  //stop the current animation if its still going on an input from the user
  var cancelAnimation = function () {
    if(animationId!==undefined){
      window.cancelAnimationFrame(animationId)
      animationId=undefined;
    }

  }

  if (document.attachEvent) {
    //if IE (and Opera depending on user setting)
    document.attachEvent("on"+mousewheelevt, cancelAnimation)
  } else if (document.addEventListener) {
    //WC3 browsers
    document.addEventListener(mousewheelevt, cancelAnimation, false)
  }

  var step = function (a,b,c) {
    var now = new Date().getTime();
    var completeness = (now - startTime) / duration;
    window.scrollTo(0, Math.round(startY + completeness * scrollY));
    currentY = window.scrollY;
    if(directionY === 'up') {
      if (currentY === 0){
        animationComplete = true;
      }else{
        animationComplete = currentY<=endY;
      }
    } 
    if(directionY === 'down') {
      /*limitY is cross browser, we want the largest of these values*/ 
      var limitY = Math.max( document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight );
      if(currentY + window.innerHeight === limitY){
        animationComplete = true;
      }else{
        animationComplete = currentY>=endY;
      }
    } 

    if(animationComplete===true){
      /*Stop animation*/
      return;
    }else{
      /*repeat animation*/
      if(count > 500){
        return;
      }else{
        count++;
        animationId = window.requestAnimationFrame(step);
      }

    }
  };
  /*start animation*/  
  step();
};

然后使用它；

scrollByAnimated(100, 250);// change in scroll Y, duration in ms

---

说明

这里的版本比原始代码建议的要健壮.其他功能包括使用requestAnimationFrame()在页面顶部和底部停止滚动.

Here's a more robust version than your original code suggested you needed. Additional features include stop scrolling at the top and bottom of the page, uses requestAnimationFrame().

它也仅支持上下滚动，因为这就是我目前所需要的.如果在左右添加，您将是一个很酷的人.

It also only supports scrolling up and down because thats all I need at this time. You'd be a cool, cool person if you added left and right to it.

它仅在Chrome中经过测试，因此您的里程可能会有所不同.

It has only been tested in Chrome, so your milage may vary.

此代码利用requestAnimationFrame().首先scrollByAnimated()设置变量，然后运行step()循环运行直到达到持续时间.

This code leverages requestAnimationFrame(). First scrollByAnimated() sets variables, then runs step() which loops until the duration has been reached.

在每帧中，它以从0到1的数字来计算动画的completeness.这是startTime和now之间的差除以duration.

At each frame it calculates the animation's completeness as a number from 0 to 1. This is the difference between the startTime and now, divided by duration.

然后将此completeness值乘以请求的scrollY.这使我们可以滚动每一帧.然后我们添加startY位置以获得一个值，我们可以使用window.scrollTo()来设置框架的位置，而不是增加当前位置.

This completeness value is then multiplied by the requested scrollY. This gives us our amount to scroll for each frame. Then we add the startY position to achieve a value that we can use window.scrollTo() to set the frame's position, rather than increment the current position.

这篇关于使重复滚动更平滑，就像jQuery的动画scrollTop一样的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！