Question

我需要滚动到顶部，并且我希望根据视口在滚动之前在文档中的距离来修改滚动的持续时间。我想在滚动长度增加时添加较小的时间增量。所以我遇到的问题是如何将曲线应用于数字，我假设的等式。我的数学生锈了。

举个例子，我该怎么做：

0 to 1000 pixels -> 300 (+300)
1001 to 2000 -> 500 (+200)
2001 to 3000 -> 700 (+200)
3001 to 4000 -> 800 (+100)
4001 to 5000 -> 900 (+100)

然后继续为每1000个像素添加100的增量。或者曲线然后在达到某一点时每1000最少增加100。

我知道我可以使用if/else if语句执行上述操作，但为了简洁起见，我希望使用数学来完成上述操作，因此更容易使用这些值。

很抱歉，因为我确信这些信息已存在于其他地方，但我不确定如何使用搜索来查找我正在寻找的答案。只是指向正确类型的数学或教程的指针就足够了，但当然也会有更详细的答案。

我也会对这个特定用例感觉更自然的任何建议感兴趣。我试过了：

var duration = Math.ceil ( $('html').scrollTop() / 1000 ) * 300;

但是对于更长的距离感觉太慢了。

更新

关于if/else if选项，我提出了下面的伪代码，它使用if/else if但具有一定的灵活性，紧凑。我仍然想用一些数学代替if/else if语句。

num = scrollTop
duration = 0
while ( num > 0 ) {
    a = Math.ceil(num/1000)
    if ( a >= 4 ) {
        duration += 100
    } else if ( a >= 2 ) {
        duration += 200
    } else {
        duration += 300
    }
    num -= 1000
}

更新2

我已经实现了这个代替更好的解决方案，这里是JS：

var num = $('html').scrollTop();
var duration = 0;
while ( num > 0 ) {
    var a = Math.ceil(num/1000);
    if ( a >= 4 ) {
        duration += 100;
    } else if ( a >= 2 ) {
        duration += 200;
    } else {
        duration += 300;
    }
    num -= 1000;
}

Answer 1

癫痫警告！

您可以使用＆quot; recursive＆＃39;调用requestAnimationFrame并在其中更改值以控制滚动速度。

的示例：

恒速和恒定加速：

＆＃13;

var speed = 3;
var position = 2000;
var acceleration = 1.3;
window.scrollTo(0, position);
scrollToTopAnimated();


function scrollToTopAnimated() {
  requestAnimationFrame((delta) => {
    var deltaSec = delta / 1000;
    speed += acceleration * deltaSec;
    position -= speed * deltaSec;
    window.scrollTo(0, position);
    if (position > 0)
      scrollToTopAnimated();
  })
}

＆＃13;

body {
  height: 2000px;
  width: 100%;
  background-image: linear-gradient(to bottom, red, yellow, green, blue, red, yellow, green, blue);
}

＆＃13;

<h1> Hello World </h1>

＆＃13;

或者以加速波浪作为浪潮：

＆＃13;

var speed = 2;
var position = 2000;
var posOnSin = 0;
var sinSpeed = Math.PI;
window.scrollTo(0, position);
scrollToTopAnimated();


function scrollToTopAnimated() {
  requestAnimationFrame((delta) => {
    var deltaSec = delta / 1000;
    position -= speed * deltaSec + Math.sin(posOnSin) * deltaSec * 2;
    posOnSin += sinSpeed * deltaSec;
    window.scrollTo(0, position);
    if (position > 0)
      scrollToTopAnimated();
  })
}

＆＃13;

body {
  height: 2000px;
  width: 100%;
  background-image: linear-gradient(to bottom, red, yellow, green, blue, red, yellow, green, blue);
}

＆＃13;

<h1> Hello World </h1>

＆＃13;

根据曲线/公式/公式修改滚动持续时间

1 个答案:

癫痫警告！

的示例：