0

ユーザーがスクロールし続けると継続的に拡大するサイトの設計を依頼されました。私は JavaScript の経験がありますが、これを管理できるものに出会ったことはありません。この手法を使用する人気のあるサイトは、Twitter と Facebook です。より多くのコンテンツを読み込むには AJAX が必要になることはわかっていますが、ユーザーがページの下部に近づいていることをブラウザがどのように認識するかはわかりません。

4

3 に答える 3

5

これは、3 つの JavaScript 関数を使用して実行できます。最初は window.scrollY。この関数は、Web ページの高さの位置を示します (つまり、一番上にいる場合は 0 で、下にスクロールすると高くなります)。

2 つ目はdocument.body.scrollHeight、スクロールを含むウィンドウの全体の高さです。

最後の関数はwindow.innerHeight. これにより、ユーザーが見ることができるウィンドウの高さ (可視部分の高さ) が得られます。

これら 3 つの関数を使用すると、ブラウザー ウィンドウの上下の位置と、ページ全体のサイズを取得できます。そこから、ユーザーがページのどこにいるかを把握し、ページを展開する必要があるかどうかを判断できます。

于 2012-11-14T20:59:23.313 に答える
1

これは、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>
于 2012-11-15T18:52:36.133 に答える
0

http://www.youtube.com/watch?v=eziREnZPml4

<script type="text/javascript">
function yHandler();
var wrap = document.getElementById('wrap');
    var contentHeight = wrap.offsetHeight;
var yOffset = window.pageYOffset; 
var y = yOffset + window.innerHeight;
if(y >= contentHeight){
    // Ajax call to get more dynamic data goes here
    wrap.innerHTML += '<div class="newData"></div>';
}
var status = document.getElementById('status');
status.innerHTML = contentHeight+" | "+y;
}

window.onscroll = yHandler;
</script>
于 2013-06-12T17:57:46.750 に答える