Fatal编程技术网
  • javascript/
  • Javascript 连续或无限滚动，接近页面底部时会加载更多内容

Javascript 连续或无限滚动，接近页面底部时会加载更多内容

javascript ajax dynamic scroll

Javascript 连续或无限滚动，接近页面底部时会加载更多内容,javascript,ajax,dynamic,scroll,Javascript,Ajax,Dynamic,Scroll,我被要求设计一个随着用户不断滚动而不断扩展的网站。我在JavaScript方面很有经验，但我从来没有遇到过任何可以处理这个问题的东西。使用这种技术的热门网站有Twitter和Facebook。我知道我需要AJAX来加载更多内容，但我不确定浏览器如何知道用户已接近页面底部？您可以使用三个JavaScript函数来实现这一点。第一个是窗口。滚动。此功能将为您提供网页上的高度位置（即，如果您位于顶部，则高度为0，当您向下滚动时，高度将增加） 第二个是document.body.scrollHeight

我被要求设计一个随着用户不断滚动而不断扩展的网站。我在JavaScript方面很有经验，但我从来没有遇到过任何可以处理这个问题的东西。使用这种技术的热门网站有Twitter和Facebook。我知道我需要AJAX来加载更多内容，但我不确定浏览器如何知道用户已接近页面底部？

您可以使用三个JavaScript函数来实现这一点。第一个是
窗口。滚动
。此功能将为您提供网页上的高度位置（即，如果您位于顶部，则高度为0，当您向下滚动时，高度将增加）

第二个是
document.body.scrollHeight
，它提供了窗口的总高度，包括滚动条

最后一个函数是
window.innerHeight
。这将为您提供用户可以看到的窗口高度（可见部分的高度）


使用这三个函数，您可以获得浏览器窗口的顶部和底部位置以及整个页面的大小。由此，您可以确定用户在页面上的位置，并确定页面是否应展开。
您可以使用三个JavaScript函数来完成此操作。第一个是
窗口。滚动
。此功能将为您提供网页上的高度位置（即，如果您位于顶部，则高度为0，当您向下滚动时，高度将增加）

第二个是
document.body.scrollHeight
，它提供了窗口的总高度，包括滚动条

最后一个函数是
window.innerHeight
。这将为您提供用户可以看到的窗口高度（可见部分的高度）


使用这三个函数，您可以获得浏览器窗口的顶部和底部位置以及整个页面的大小。从这一点，您可以找出用户在页面上的位置，并确定页面是否应该展开。
下面是一个基于Patrick548的答案（我对此投了赞成票）的包含虚假AJAX调用的示例。在铬中测试

这并不能解释用户是否可以滚动到页面顶部，但是支持应该很容易添加


<!doctype html>
<html lang="en">
    <head>
        <title>Infinite Scroll Test</title>
        <style>
#articles {
    width: 200px;
}

.article {
    display: block;
    border: 1px solid #000;
    border-radius: 4px;
    background-color: #eee;
    margin-bottom: 1em;
}
        </style>

        <script>
var articleCounter = 0;

function fakeAjaxCall(cb) {
    var createNewArticle = function() {
            return {
                id: ++articleCounter
              , author: 'Foo Bar'
              , text: 'Lorem ipsum and all that jazz.'
            };
        }
      , articles = []
    ;

    for (var i=0; i<10; i++) {
        var fakeArticle = createNewArticle();
        articles.push(fakeArticle);
    }

    // call the fake success handler with the fake data
    if (cb && typeof(cb == 'function')) cb({ articles: articles });
}

function appendFakeData(data) {
    if (! data && data.articles) return;

    for (var i=0; i<data.articles.length; i++) {
        var article = data.articles[i]
        document.querySelector('#articles').innerHTML +=
            '<div class="article">[' + article.id + '] ' + article.author + ' sez:<br>' + article.text + '</div>';
   }

    var articleCount = document.querySelectorAll('.article').length;
    console.log('article count is now: ' + articleCount);

    if (articleCount > 50) removeFirstTenArticles();
}

function removeFirstTenArticles() {
    var articlesEl    = document.querySelector('#articles')
      , firstChild    = articlesEl.firstChild
      , articleStyle  = window.getComputedStyle(document.querySelector('.article'))
      , articleHeight = parseInt(articleStyle.height) + parseInt(articleStyle.marginBottom);
    ;

    // remove the first 10 articles in the container
    for (var i=0; i<10; i++) {
        articlesEl.removeChild(firstChild);
        firstChild = articlesEl.firstChild;
    }

    // scroll back to where the new articles were inserted
    document.body.scrollTop -= (10 * articleHeight);
}

window.addEventListener('load', function() {
    document.body.scrollTop = 0; // start at the top
    fakeAjaxCall(appendFakeData);
});

document.addEventListener('scroll', function(evt) {
    // if distance from bottom of page is zero, grab and append more articles
    if (document.body.scrollHeight - (window.innerHeight+window.scrollY) == 0) {
        console.log('getting more data...');
        fakeAjaxCall(appendFakeData);
    }
});
        </script>
    </head>

    <body>
        <section id="articles"></section>
    </body>
</html>




无限滚动试验
#文章{
宽度：200px；
}
.文章{
显示：块；
边框：1px实心#000；
边界半径：4px；
背景色：#eee；
边缘底部：1米；
}
var-articleccounter=0；
函数fakeAjaxCall（cb）{
var createNewArticle=函数（）{
返回{
id:++articleCounter
，作者：'foobar'
，文字：“Lorem ipsum和所有的爵士乐。”
};
}
，articles=[]
;
对于（VARI=0；I50）removeFirstTenArticles（）；
}
函数removeFirstTenArticles（）{
var articlesEl=document.querySelector（“#articles”）
，firstChild=articlesEl.firstChild
，articleStyle=window.getComputedStyle（document.querySelector（'.article'））
，articlehight=parseInt（articleStyle.height）+parseInt（articleStyle.marginBottom）；
;
//取出容器中的前10件物品

对于（var i=0；i这里有一个基于Patrick548的答案（这得到了我的支持）的包含虚假AJAX调用的独立示例。在Chrome中测试

这并不能解释用户是否可以滚动到页面顶部，但是支持应该很容易添加


<!doctype html>
<html lang="en">
    <head>
        <title>Infinite Scroll Test</title>
        <style>
#articles {
    width: 200px;
}

.article {
    display: block;
    border: 1px solid #000;
    border-radius: 4px;
    background-color: #eee;
    margin-bottom: 1em;
}
        </style>

        <script>
var articleCounter = 0;

function fakeAjaxCall(cb) {
    var createNewArticle = function() {
            return {
                id: ++articleCounter
              , author: 'Foo Bar'
              , text: 'Lorem ipsum and all that jazz.'
            };
        }
      , articles = []
    ;

    for (var i=0; i<10; i++) {
        var fakeArticle = createNewArticle();
        articles.push(fakeArticle);
    }

    // call the fake success handler with the fake data
    if (cb && typeof(cb == 'function')) cb({ articles: articles });
}

function appendFakeData(data) {
    if (! data && data.articles) return;

    for (var i=0; i<data.articles.length; i++) {
        var article = data.articles[i]
        document.querySelector('#articles').innerHTML +=
            '<div class="article">[' + article.id + '] ' + article.author + ' sez:<br>' + article.text + '</div>';
   }

    var articleCount = document.querySelectorAll('.article').length;
    console.log('article count is now: ' + articleCount);

    if (articleCount > 50) removeFirstTenArticles();
}

function removeFirstTenArticles() {
    var articlesEl    = document.querySelector('#articles')
      , firstChild    = articlesEl.firstChild
      , articleStyle  = window.getComputedStyle(document.querySelector('.article'))
      , articleHeight = parseInt(articleStyle.height) + parseInt(articleStyle.marginBottom);
    ;

    // remove the first 10 articles in the container
    for (var i=0; i<10; i++) {
        articlesEl.removeChild(firstChild);
        firstChild = articlesEl.firstChild;
    }

    // scroll back to where the new articles were inserted
    document.body.scrollTop -= (10 * articleHeight);
}

window.addEventListener('load', function() {
    document.body.scrollTop = 0; // start at the top
    fakeAjaxCall(appendFakeData);
});

document.addEventListener('scroll', function(evt) {
    // if distance from bottom of page is zero, grab and append more articles
    if (document.body.scrollHeight - (window.innerHeight+window.scrollY) == 0) {
        console.log('getting more data...');
        fakeAjaxCall(appendFakeData);
    }
});
        </script>
    </head>

    <body>
        <section id="articles"></section>
    </body>
</html>




无限滚动试验
#文章{
宽度：200px；
}
.文章{
显示：块；
边框：1px实心#000；
边界半径：4px；
背景色：#eee；
边缘底部：1米；
}
var-articleccounter=0；
函数fakeAjaxCall（cb）{
var createNewArticle=函数（）{
返回{
id:++articleCounter
，作者：'foobar'
，文字：“Lorem ipsum和所有的爵士乐。”
};
}
，articles=[]
;
对于（VARI=0；I50）removeFirstTenArticles（）；
}
函数removeFirstTenArticles（）{
var articlesEl=document.querySelector（“#articles”）
，firstChild=articlesEl.firstChild
，articleStyle=window.getComputedStyle（document.querySelector（'.article'））
，articlehight=parseInt（articleStyle.height）+parseInt（articleStyle.marginBottom）；
;
//取出容器中的前10件物品
对于（var i=0；i



函数yHandler（）；
var wrap=document.getElementById（'wrap'）；
var contentHeight=wrap.offsetHeight；
var yOffset=window.pageYOffset；
变量y=yOffset+window.innerHeight；
如果（y>=内容高度）{
//这里是获取更多动态数据的Ajax调用
wrap.innerHTML+=''；
}
var status=document.getElementById（'status'）；
status.innerHTML=contentHeight+“|”+y；
}
window.onscroll=yHandler；




函数yHandler（）；
var wrap=document.getElementById（'wrap'）；
var contentHeight=wrap.offsetHeight；
var yOffset=window.pageYOffset；
变量y=yOffset+window.innerHeight；
如果（y>=内容高度）{
//这里是获取更多动态数据的Ajax调用
wrap.innerHTML+=''；
}
var status=document.getElementById（'status'）；
status.innerHTML=contentHeight+“|”+y；
}
window.onscroll=yHandler；

可能重复可能重复和快速谷歌给你这个：谷歌阅读器做这个。你可以看一看他们的代码。可能重复可能重复和快速谷歌给你这个：谷歌阅读器做这个。你可以看一看他们的代码。