Question

我希望让页面滚动到某一点，并在接近该点时逐渐变慢。

我想使用下面这个问题的最佳答案（包括代码），但我不认为一个简单的因素会产生同样的减速效果我试图实现： Changing the interval of SetInterval while it's running

function setDeceleratingTimeout( callback, factor, times )
{
  var internalCallback = function( t, counter )
  {
    return function()
    {
      if ( --t > 0 )
      {
        window.setTimeout( internalCallback, ++counter * factor );
        callback();
      }
    }
  }( times, 0 );

  window.setTimeout( internalCallback, factor );
};

以下是我在我的网站上运行的一系列功能，虽然它在jsfiddle.com中不起作用，我假设因为它没有由页面加载触发：

function Scroll_01()
{
    window.scrollTo(0,100)
    setTimeout('Scroll_02()',25)
}
function Scroll_02()
{
    window.scrollTo(0,136)
    setTimeout('Scroll_03()',25)
}
function Scroll_03()
{
    window.scrollTo(0,169)
    setTimeout('Scroll_04()',25)
}
function Scroll_04()
{
    window.scrollTo(0,188)
    setTimeout('Scroll_05()',25)
}
function Scroll_05()
{
    window.scrollTo(0,207)
    setTimeout('Scroll_06()',25)
}
function Scroll_06()
{
    window.scrollTo(0,221)
    setTimeout('Scroll_07()',25)
}
function Scroll_07()
{
    window.scrollTo(0,235)
    setTimeout('Scroll_08()',25)
}
function Scroll_08()
{
    window.scrollTo(0,245)
    setTimeout('Scroll_09()',25)
}
function Scroll_09()
{
    window.scrollTo(0,255)
    setTimeout('Scroll_10()',25)
}
function Scroll_10()
{
    window.scrollTo(0,262)
    setTimeout('Scroll_11()',25)
}
function Scroll_11()
{
    window.scrollTo(0,270)
    setTimeout('Scroll_12()',25)
}
function Scroll_12()
{
    window.scrollTo(0,277)
    setTimeout('Scroll_13()',25)
}
function Scroll_13()
{
    window.scrollTo(0,285)
    setTimeout('Scroll_14()',25)
}
function Scroll_14()
{
    window.scrollTo(0,288)
    setTimeout('Scroll_15()',25)
}
function Scroll_15()
{
    window.scrollTo(0,292)
    setTimeout('Scroll_16()',25)
}
function Scroll_16()
{
    window.scrollTo(0,294)
    setTimeout('Scroll_17()',25)
}
function Scroll_17()
{
    window.scrollTo(0,296)
    setTimeout('Scroll_18()',25)
}
function Scroll_18()
{
    window.scrollTo(0,298)
    setTimeout('Scroll_19()',25)
}
function Scroll_19()
{
    window.scrollTo(0,300)
}

http://jsfiddle.net/8S3CL/

我通过将它们绘制在图表上来绘制scrollTo Y访问数字，其中100-300的值试图获得平滑曲线，但效果很好，但显然不是漂亮的代码。

有谁知道JavaScript代码和等式可能会取代19个菊花链功能？

Answer 1

您可以使用setTimeout通过递归调用实现目标，根据当前位置和目标位置之间的距离调整滚动步骤。

我创造了一个小提琴演示它here。

关键部分是递归调用：

function smoothScrollTo(targetY, step, intervalMs) {
    ...
    setTimeout(function() { smoothScrollTo(targetY, step, intervalMs); }, intervalMs); 
}

计算滚动步骤：

var sgn = Math.sign(targetY-currentY);
var distance = Math.abs(currentY-targetY);
var step1 = (distance < 100) ? Math.max(step*distance/50,1) : step;
window.scrollTo(0, currentY+sgn*step1);

您应该优化此方法，但要计算一些问题：

验证给定的目标位置。
介绍一个可选的回调，当滚动到达目标时将调用该回调。
如果用户在此平滑滚动期间滚动，该怎么办？使用当前的方法，javascript将不会停止，并且即使用户在期间滚动，也会想要滚动到其目标。

减速scrollTo（）函数

1 个答案: