鎖定滾動作爲新內容添加上方和下方

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>

追加當前視口下面的內容不應該需要調整。

Here's a blog post描述了類似的方法，以及similar SO question。

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