新しいコンテンツとして上下にスクロールをロック

Question

私はmeteor.jsアプリをニュースフィードとして提供しています。スレッドは投稿されていて、リアルタイムでスレッドにコメントしています。これは、あなたが投稿を見ている間に、上と下の投稿に新しいコメントが追加され、上に新しいスレッドが追加されることを意味します。これは、あなたが既に上にスクロールされていない限り、あなたが期待していない、ビューポートの上下に注目している投稿をプッシュします。

新しいコンテンツが追加されたときと同じ視覚センターを維持するためにスクロールを更新する最も良い方法は何ですか？

Answer 1

あなたはこのアプローチを試みることができる：

1. がscrollTop値を保存します。
2. コンテンツを追加する（つまり、フォーカスを当てたものの上に新しい投稿を追加する）。
3. 新しいコンテンツの高さを手順1で保存した値に追加します。
4. 新しい値にスクロールします。

   function randomString() { 
    
       return Math.random().toString(36).substring(7); 
    
   } 
    
   
    
   $('#addAbove').on('click', function(e){ 
    
       var newDiv = $('<li class="post">' + randomString() + '</li>'); 
    
       var savedScrollTop = $('#content').scrollTop(); 
    
       $('#content').prepend(newDiv); 
    
       $('#content').scrollTop(savedScrollTop + newDiv.height()); 
    
   }); 
    
   
    
   $('#addBelow').on('click', function(e){ 
    
       var newDiv = $('<li class="post">' + randomString() + '</li>'); 
    
       $('#content').append(newDiv); 
    
   });

   #content { 
    
       height: 100px; 
    
       overflow-y: scroll; 
    
   } 
    
   .post { 
    
       height: 40px; 
    
   }

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    
   <ul id="content"> 
    
       <li class="post">u9tv190be29</li> 
    
       <li class="post">dgdr8gp66rp</li> 
    
       <li class="post">93vfntdquxr</li> 
    
   </ul> 
    
   <button id="addAbove">Add Above</button> 
    
   <button id="addBelow">Add Below</button>

   調節する必要はありません現在のビューポート以下のコンテンツを追加は：

は、ここでの例です。同様の手法を説明しているsimilar SO question。

Here's a blog post。

Answer 2

新しいアイテムを追加する場合は、トップにいるかどうかを確認し、そうであれば新しいアイテムを追加してください。

もしそうでなければ、アイテムコンテナの既存のトップ/ハイトを取得し、新しいアイテムを追加し、アイテムコンテナの高さをもう一度取得してスクロールトップを更新します。

ここでは、トップとボトムの両方に追加する方法（btw、下部はスクロール補正が不要）の簡単なサンプルを示します。

function addItem (totop) { 
 
    var msgdiv = document.getElementById('items'); 
 
    var attop = scrollAtTop(msgdiv); 
 
    var prevtop = parseInt(msgdiv.scrollHeight - msgdiv.scrollTop); 
 

 
    if (totop) { 
 
    msgdiv.innerHTML = 'Long long content ' + (tempCounter++) + '!<br/>' + msgdiv.innerHTML; 
 

 
    if (!attop) { 
 
     updateScroll(msgdiv, parseInt(msgdiv.scrollHeight) - prevtop); 
 
    } 
 
    } else { 
 
    msgdiv.innerHTML += 'Long long content ' + (tempCounter++) + '!<br/>'; 
 
    } 
 
} 
 

 
var tempCounter = 10; 
 
function updateScroll(el, top){ 
 
    el.scrollTop = top; 
 
} 
 
function scrollAtTop(el){ 
 
    return (el.scrollTop == 0); 
 
}

html, body { height:100%; margin:0; padding:0; } 
 

 
.items{ 
 
    display: inline-block; 
 
    width: 300px; 
 
    height: 220px; 
 
    border: 1px solid black; 
 
    overflow: auto; 
 
} 
 

 

 
button { width: 15%; height: 44px; margin: 20px; vertical-align: top; }

<div class="items" id="items"> 
 
    Long long content 9!<br/> 
 
    Long long content 8!<br/> 
 
    Long long content 7!<br/> 
 
    Long long content 6!<br/> 
 
    Long long content 5!<br/> 
 
    Long long content 4!<br/> 
 
    Long long content 3!<br/> 
 
    Long long content 2!<br/> 
 
    Long long content 1!<br/> 
 
</div> 
 
<button onclick="addItem(true);">Add 2 top</button><button onclick="addItem(false);">Add 2 bottom</button>

Answer 3

あなたが問題を解決するために、パッケージanimated-eachmeteor add mizzao:animated-eachを使用することができます。

カスタムjqueryを実装するよりも確かに良いでしょう。パッケージが正確な問題を解決できない場合は、レンダリングにフックして流星を解決する方法の例としてパッケージを使用することができます。おそらく利用してmeteor-ui-hooks