लॉक स्क्रॉल ऊपर और नीचे

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