Question

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

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

每当我滚动容器中90％的元素时，我会进行一次js调用，它会将更多结果加载到我的容器中，并将剩余的元素添加到ul。

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

P.S。我没有在这种情况下尝试过的任何代码。我不知道该怎么做。这是解决我遇到的问题的最后一次尝试附： 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);
})();

在滚动大型增长容器时滚动容器更改速度

1 个答案: