javascript - OnScrolling 新页面正在自动加载

Question

实际上我看过一个网站，在滚动新页面时会自动加载并将其附加到旧页面。

不仅页面，URL 在滚动时也会发生变化。

我完全不知道如何实现这一点。这是我看过的网站matt。这里只要向下滚动，就会有无限滚动条的概念，而且URL地址栏也会自动变化。

Answer 1

如果您想在滚动时将动态内容从某个数据库附加到现有页面，然后在滚动时进行 ajax 调用，并通过使用节流函数来限制调用次数，这将返回您的 ajax 调用的节流版本，即您的 ajax 调用在等待毫秒时间段内最多只会提供一次。

var myajax = _.throttle(/*your ajax call goes here*/, wait/*time in ms*/);

_.throttle()是underscore.js库的一部分，如果你不想包含这个库，那么你可以使用我的节流阀版本，

function myThrottle(func, wait, leading) {
  var lastCall = 0, timeout = null,

  execute = function() {
    clearTimeout(timeout);
    timeout = null;
    func();
  };

  return function() {
    var currentTime = new Date().getTime();
    if (leading && (lastCall == 0 || (currentTime - lastCall) > wait)) {
      lastCall = currentTime;
      func();
    }

    else if (!leading && !timeout)
      timeout = setTimeout(execute, wait);
  };
}

这里的第三个参数如果为真，则将在等待持续时间的前沿进行调用，否则将在后沿阻止进一步的调用（默认行为）。

Answer 2

你可以使用这样的东西：

var documentBottom = $(document).height(), // cache document height
    page = 0; // current page number

$(document).on('scroll', function () {
    // if window scroll position bigger than document bottom minus 300px,
    // then make ajax request and append result to container
    if($(window).scrollTop() > documentBottom - 300) { 
        $.ajax({
            type: "POST",
            url: "some.php",
            data: { page: page },
            success: function (data) {
                $('.my-container').append(data); // appending result

                // cache new document height
                documentBottom = $(document).height();

                page += 1; // change page number

                //change url in address bar
                window.history.pushState({},"","/page/"+page); 
            }
        });
    }
});