AJAX चैट - स्क्रॉल को स्वचालित रूप से खींचें, लेकिन उपयोगकर्ता स्क्रॉल करते समय इसे खींचें नहीं?

Question

आप जानते हैं कि चैट का अधिकांश हिस्सा, स्क्रॉल नीचे चला जाता है, जब कोई नया संदेश दिखाई देता है। मेरी चैट प्रत्येक 5000 एमएस पुनः लोड करती है, और उसके बाद 300ms नीचे स्क्रॉल ड्रैग करती है।

लेकिन मैं इसे बनाना चाहता हूं, इसलिए जब उपयोगकर्ता स्क्रॉल अप करता है, तो स्क्रॉल ड्रैग उसे प्रभावित नहीं करेगा। उपयोगकर्ता द्वारा स्क्रॉल किए जाने के बाद, एक चर को भरने के लिए, draggedScroll = true भरने के लिए कोई फ़ंक्शन है?

http://driptone.com/jony/applications/chat/index.php

इस

चैट है, और जैसा कि आप देख, अगर आप ऊपर जाना है, यह आपको हर 5000ms नीचे खींच जाएगा, और मैं इसे रोकने के लिए स्क्रॉल केवल जब उपयोगकर्ता चाहते हैं। और यदि उपयोगकर्ता नीचे [0] नीचे स्क्रॉल किया गया है, तो यह draggedScroll = false बना देगा, इसलिए यह उसे फिर से प्रभावित करेगा।

मैं यह कैसे कर सकता हूं?

समस्या हल नहीं हुई है!

समस्या स्पष्टीकरण:

स्क्रॉल केवल काम यदि पुस्तक की ऊंचाई होगा कम से कम 1500px (scrollTop (1500)) (चैट में 34 संदेश) ।

यदि यह नीचे है, तो स्क्रॉल काम नहीं करेगा, और नए संदेश पर स्क्रॉल करेगा।

Answer 1

function reload() { 
    var oldscrollHeight = ($("#chat").scrollTop() + 470); 
    console.log(" old: " + oldscrollHeight); 
    $.post("ajax.php", { loadMessages : "1" }, function(data) { 
     $(".discussion").html(data); 
     var newscrollHeight = $("#chat").prop("scrollHeight"); 
     console.log(" new: " + newscrollHeight); 
     if(newscrollHeight < (oldscrollHeight + 150)) { 
      var height = $('#chat')[0].scrollHeight; 
      $('#chat').scrollTop(height); 
     }   
    });  
} 

असल में मैंने वहां क्या किया, मैंने स्क्रॉल की वर्तमान स्थिति ली और इसमें 470 पीएक्स जोड़ा (क्योंकि यह हमेशा पूरी ऊंचाई से कम होगा)।

और फिर जाँच, अगर नई ऊंचाई, पुराने ऊंचाई + 150px से < है।

यदि हाँ, तो नीचे स्क्रॉल करें। अन्य एक ही स्थिति पर रहो।

Answer 2

element.scrollTop पर एक जांच करें। यदि यह element.scrollHeight - element.height के बराबर है तो स्क्रॉलिंग करें, अन्यथा स्क्रॉल न करें।

element = $("#chat")[0]; 
if (element.scrollTop == element.scrollHeight - element.height) 
    element.scrollTop(element.scrollHeight); 

Answer 3

मैं इस समस्या अपने आप को था और यह है कि कैसे मैं इसे हल:

1. उचित कंटेनर
2. की scroll घटना ईवेंट हैंडलर के अंदर से आबद्ध बाहर पढ़ें:
   • $(element).scrollTop()
   • $(element).prop('scrollHeight')
   • $(element).height()
3. स्क्रॉलबार नीचे स्थित है जब scrollTop == scrollHeight - height
4. अगर हालत true है: यह अन्यथा अक्षम करें, स्वचालित स्क्रॉल सक्षम करें।
5. तो उपयोगकर्ता अनुभव को बेहतर करने के लिए मार्जिन किसी तरह का घटाना जरूरत एक ध्वज (मेरी समाधान को देखने)

My solution (written in CoffeeScript)

$('#messageContainer').on('scroll', function(event) { 
    var element, height, scrollHeight, scrollTop; 
    element = $(this); 
    scrollTop = element.scrollTop(); 
    scrollHeight = element.prop('scrollHeight'); 
    height = element.height(); 
    if (scrollTop < scrollHeight - height - 25) { 
    disableScroll(); 
    } 
    if (scrollTop > scrollHeight - height - 10) { 
    return enableScroll(); 
    } 
}); 

Answer 4

बस तैयार किया, जबकि स्क्रॉलबार की तरह, isdraged:

var bScroll = true; // My flag for true = scrolling allowed, false = scrolling prevented 

$('#scrollbar').focus(function(){ bScroll = false;); 
$('#scrollbar').focusOut(function(){ bScroll = true;); 

function scroll(){ 
    if(!bScroll){ 
     return false 
    } 
} 

अद्यतन: ठीक है, जाँच bScroll