Sperren scrollen, wenn neuer Inhalt oberhalb und unterhalb hinzugefügt wird

Question

Ich habe eine meteor.js App, die als News-Feed fungiert, mit Threads gepostet wird und Leute kommentieren die Threads in Echtzeit. Dies bedeutet, dass während Sie einen Post ansehen, neue Kommentare zu den Posts oberhalb und unterhalb hinzugefügt werden und oben neue Threads hinzugefügt werden. Dadurch wird der Post, auf den Sie fokussieren, nach unten und außerhalb des Ansichtsfensters verschoben, was niemals erwartet wird (es sei denn, Sie scrollen bereits nach oben).

Was ist der beste Weg, um das Scrollen zu aktualisieren, um die gleiche visuelle Mitte beizubehalten, wenn neuer Inhalt hinzugefügt wird?

Answer 1

Sie könnten versuchen, diesen Ansatz:

1. den scrollTop Wert speichern;
2. den Inhalt voranstellen (d. H. Einen neuen Beitrag über den fokussieren);
3. fügen Sie die Höhe des neuen Inhalts dem Wert hinzu, der in Schritt 1 gespeichert wurde;
4. blättern Sie zum neuen Wert.

Hier ist ein Beispiel:

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>

unterhalb des aktuellen Darstellungs Anfügen Inhalt sollte nicht angepasst werden müssen.

Here's a blog post beschreibt einen ähnlichen Ansatz, und eine similar SO question.

Answer 2

Ich schlage vor, Sie mögen so, wenn ein neuer Artikel hinzugefügt werden Sie überprüfen, ob Sie an der Spitze sind, wenn ja, dann fügen Sie einfach den neuen Artikel.

Wenn nicht, erhalten Sie die vorhandene Höhe/Höhe Ihres Objektcontainers, fügen Sie das neue Objekt hinzu, holen Sie die Höhe des Objektcontainers ein zweites Mal und aktualisieren Sie dann das Bildlauffeld.

Hier ist ein einfaches Beispiel, wie man tun kann, Hinzufügen von oben und unten (BTW, unten brauchen keine Scroll-Kompensation).

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

Sie Paket animated-eachmeteor add mizzao:animated-each, verwenden können, um das Problem zu lösen.

Es wäre sicherlich besser als die Implementierung von benutzerdefinierten jQuery. Und wenn das Paket das genaue Problem nicht löst, dann können Sie es als ein Beispiel dafür verwenden, wie man in den Rendering einhakt und die Lösung den Weg des Meteors schafft. Wahrscheinlich würde ich unter Verwendung von meteor-ui-hooks