5

次のような状況があるとしましょう。

  • ページの長さは 4000 ピクセルです。
  • ユーザーがページを下にスクロールしたため、1000 ピクセルのコンテンツがビューポートの上に隠れています。

次に、ユーザーがボタンをクリックすると、AJAX を介して任意の長さのコンテンツがページの上部に読み込まれ、ボタン (およびユーザーが見ていたコンテンツ) がビューポートの下に押し出されます。

ボタンをクリックする前にユーザーが見ていたコンテンツまでスクロールダウンするJavascriptコールバックを作成しようとしましたが、エクスペリエンスはシームレスではありません(新しいコンテンツが挿入されると「上にスクロール」し、続いて「下にスクロール」します) 」）。

ユーザーが見ているコンテンツにビューポートを固定しておく方法はありますか?

これは単純化された例ですが、ポイントを理解する必要があります。

<div style="height: 1000px; width:1000px;" id="top-div">some content above the fold</div>
<button id="button">Click Me</button>
<img src="img.jpg" alt="Some image the user was looking at when they clicked the button." />

<script>
$("button").click(function() {
    $.get('/new/content', function(response) {
        $("#top-div").before(response);
    });
});
</script>
4

2 に答える 2

3

新しいコンテンツの表示を遅らせる

頭に浮かぶエレガントなソリューションに最も近いのは、ビューポート内またはビューポートの下になるまで新しいコンテンツの表示を遅らせることです。つまり、ビューポートの上にある主要なレイアウト要素の高さを変更しないでください。それらがビューポート内またはビューポートの下にあるときに、害を及ぼさないときに変更します。安全なときに表示してください。

たとえば、ユーザーは非常に長いページの下 3 分の 1 までスクロールします。それらがそこにある間、新しいサイズまたは異なるサイズの Ajax コンテンツがページの上部近くにロードされますが、まだ表示されていません。ユーザーがページを上にスクロールして戻り、影響を受けるレイアウト領域がすべて表示されると、新しいコンテンツがちょうどその時に読み込まれたかのように表示されます。

基本的に、Ajax コンテンツが読み込まれると、レイアウト要素のスクロール位置を取得し、ページの現在のスクロール位置に基づいてコンテンツを表示するか、キューに追加します。ユーザーがページをスクロールしたり、アンカー タグ (またはページのスクロール位置を変更するアクション) をクリックしたりするたびに、キューをチェックして、まだ表示する必要があるコンテンツがあるかどうかを確認し、安全に表示できるかどうかを判断します。表示されます。

コンテンツを折りたたみ可能にする

もう 1 つのオプションは、Ajax コンテンツを折りたたみ可能な形式で表示することです。最初は、ページ レイアウトに影響しない小さなサイズで表示される可能性があります (レイアウト要素がビューポートの上にある場合)。次に、ユーザーはコンテンツをクリックして、折りたたまれた形式と完全なバージョンを切り替えることができます。または、前のアイデアのバリエーションとして、レイアウト要素がスクロールされて表示されると、コンテンツが自動的に展開されます。

于 2013-01-09T23:00:27.957 に答える
2

このフィドルをチェックしてください： http://jsfiddle.net/FYEYB/

重要なコードは次のとおりです。

$("button").click(function() {
  //cache the org height
  var orgHeight = $("#content").height();
  //run your ajax request.
  mockAjax(function() {
    //in the callback ajust the height
    $(window).scrollTop($(window).scrollTop() + $("#content").height() - orgHeight);
  });
});

基本的に、ajax リクエストのコールバックで、コンテナの高さの違いを以前のものに追加します。新しいコンテンツが実際にビューポートの上に追加されたことを確認するためにチェックを追加する必要があるかもしれませんが、それについてはあなたにお任せします。

于 2013-01-09T21:27:01.413 に答える