javascript - 容器上的滚动会改变滚动大型容器的速度

Question

可以改进包含大量对象的列表上的滚动。

<ul>
  <li>text1</li>
  <li>text2</li>
  <li>text3</li>
  <li>text4</li>
  <li>...</li>
  .
  .
  .
  <li>text1000</li>
</ul>

每当我滚动超过容器中 90% 的元素时，我都会进行 js 调用，将更多结果加载到我的容器中，并将其余元素添加到 ul 中。

我可以根据结果的数量修改滚动时的滚动速度吗？

附:我没有在这种情况下尝试过任何代码。我不知道该怎么做。这是解决我遇到的问题的最后一次尝试。
附注2 我想要一个除了 jquery 或 jqm 之外没有任何额外库的解决方案。

编辑:通过修改滚动速度我的意思是如果有很多对象，则将滚动更改为更快，否则更慢

Answer 1

您可以使用这种代码片段:

{使用滚动条更改超时延迟以减少无聊效果}

SEE DEMO

(function () {
    var $ul = $('ul');
    for (var i = 1; i < 1001; i++)
    $ul.append('<li>test::' + i + '</li>');

    var lastScrollTop = 0,
        st,
        direction;

    function getDirection() {
        st = window.pageYOffset;
        if (st > lastScrollTop) {
            direction = "down";
        } else {
            direction = "up";
        }
        lastScrollTop = st;
        return direction;
    }


    var scrolling = function () {
        var $window = $(this);
        $window.off('scroll');
        var delta = $ul.height() / 10,
            scroll = $window.scrollTop();
        if (getDirection() === "down") $window.scrollTop(delta + scroll);
        else $window.scrollTop(scroll - delta);
        console.log($(window).scrollTop());
        lastScrollTop = this.pageYOffset;
        setTimeout(function () {
            $window.on('scroll', scrolling);
        }, 0);
    };
    $(window).on('scroll', scrolling);
})();