4

さまざまな要素のコンテンツがコア構造に AJAX 化されているページがあります。構造自体は非常に単純で、要素には特別な配置はありません。

<body>
    <article id="one"></article>
    <article id="two"></article>
    <article id="three"></article>
</body>

各記事のコンテンツは AJAX 呼び出しを介して読み込まれ、それぞれのコンテンツの長さは事前にわかりません。さらに、各セクションは URL でナビゲートできます (つまり、 でアクセスできます。ページをロード#twoしmysite.com/twoて、要求された記事までスクロールします)。

もちろん、これはすべてのコンテンツがロードされた後はうまく機能しますが、ターゲット要素の前のコンテンツがまだロードされていない場合に問題が発生します。要素はコンテンツに合わせて拡張する必要があるため、ターゲット要素を押し下げるため、これを取得する代わりに:

____________________
| Target Element   |
|                  |
|__________________|
| Next Element     |
|__________________|

あなたはこれを得る：

_____________________
| Previous Element  |
|                   |
|                   |
|___________________|
| Target Element    |
|___________________|

コンテンツ ブロックの最小の高さを設定しようとしましたが、それは一部の時間でしか機能せず、実際には最終的な高さが元の高さに近い場合にのみ機能します。

理想的には、すべてのコンテンツが読み込まれる前にユーザーがスクロールした場合でも、ビューポートがコンテンツに対して同じ位置に留まるようにしたいのですが、ユーザーがスクロールしようとする前にその位置を維持することに落ち着きます。

これらのいずれかを行う方法はありますか？

4

4 に答える 4

0

ここに小さなデモを作成しました: http://jsfiddle.net/dS5tq/

これをチェックしてください。

ページの読み込み後に 2 番目の div までスクロールしてみてください。

以前setTimeoutは、テキストを追加し、テキスト用に既存の段落を複製していました。

HTMLコード

<div>
    <div id='one' class='box'>
        <p>um vulputate pretium id nec lorem. Cras ut pharetra massa. Aliquam venenatis ipsum pellentesque lorem viverra eleifend. Pellentesque in<p>
    </div>
    <div id='two' class='box'>
        <p>ger elementum, orci eu tincidunt vehicula, nisl felis semper odio, lacinia elementum risus leo vitae dui. Fusce dictum, justo a consequat ullamcorp<p>
    </div>
    <div id='three' class='box'>
        <p>ce in cursus leo. Integer lorem urna, lacinia mollis libero aliquam, consequat luctus lacus. Mauris pulvinar consequat justo, sed mattis sapien<p>
    </div>
</div>

CSSコード

* { padding : 0; 
    margin : 0; 
}
.box {
    font-family : Arial;
    border : 1px solid #ccc;
    background-color : #eee;
    padding : 10px 10px 0 10px;
    line-height : 24px;
    margin : 10px;
}
p {
    margin-bottom : 10px;
}
#two {
    background-color : #ece;
}
#three {
    background-color : #eec;
}

JavaScript コード

$(function() {
    setTimeout(function() {
        addContent($('#one p:last').clone(), $('#one'));
    }, 3000);

    setTimeout(function() {
        addContent($('#one p:last').clone(), $('#three'));
    }, 5000);
});

function addContent(data, tgt) {
    var current_pos = $(window).scrollTop();
    var tgt_pos = $(tgt).offset().top;

    if(tgt_pos < current_pos) {
        var currentHeight = $(tgt).height();
        $(tgt).append(data);
        var newHeight = $(tgt).height();
        $(window).scrollTop(current_pos + newHeight - currentHeight);
    } else {
        $(tgt).append(data);
    }
}

これが役立つかどうか教えてください。

于 2013-08-06T17:13:29.493 に答える