स्क्रॉलटॉप एंड्रॉइड मोबाइल में काम नहीं कर रहा है

Question

एंड्रॉइड मोबाइल ऐप के लिए चैट कार्यक्षमता विकसित कर रहा हूं, क्योंकि यह jQuery और jQuery मोबाइल थीम फ्रंटएंड का उपयोग कर रहा हूं।

मेरी समस्या नीचे नए संदेशों को जोड़ने के लिए scrollTop() फ़ंक्शन का उपयोग करने का प्रयास कर रहा है। scrollTop() फ़ंक्शन सभी ब्राउज़रों में ठीक काम कर रहा है लेकिन एंड्रॉइड में यह काम नहीं कर रहा है .. किसी के बारे में कोई भी विचार है। यहाँ एचटीएमएल कोड है:

<div data-role="page" id="chatPage"> 
    <div data-role="content"> 
     <div id="incomingMessages" style="height: 180px;overflow: auto;"> 
     </div> 
     <label for="messageText"><strong>Message:</strong></label> 
     <table width="100%"> 
      <tr> 
       <td width="75%"> 
        <textarea name="messageText" id="messageText"></textarea> 
       </td> 
       <td width="25%"> 
        <div id="sendButtonId" style="display:block"> 
         <a data-role="button" id="chatSendButton" name="chatSendButton" value="Send" make_button_disabled="enable"> 
          Send 
         </a> 
        </div> 
       </td> 
      </tr> 
     </table> 
     <table> 
      <tr> 
       <td> 
        <div id="endChatButton"> 
         <a data-role="button" id="chatCloseButton" name="chatCloseButton" value="EndChat" make_button_disabled="enable"> 
          End Chat 
         </a> 
        </div> 
       </td> 
      </tr> 
     </table> 
    </div> 
</div> 

यहाँ jQuery कोड scrollbuttom के लिए है:

$("#chatSendButton").click(function() { 
    var mes = $("#messageText").val(); 
    $("#incomingMessages").append("<div class='message'><span class='username'>" +'Admin'+ ":" +"</span> "+ mes + "</div>"); 
    $("#incomingMessages").scrollTop($("#incomingMessages")[0].scrollHeight); 
}); 

Answer 1

संपादित करें: मैं पाया है कि आप "शीर्ष" शैली सेट करता है, तो करने के लिए, -120 कहते हैं, इसे उन 120px द्वारा div को "स्क्रॉल" करना चाहिए।

यहाँ एक HTML उदाहरण (सभी इनलाइन शैलियों के लिए खेद है):

<div id="container" style="position:relative; display:block; overflow:scroll; height:100px; border:1px solid;"> 
    <div style="position: relative; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(0, 0, 0))); height: 300px; width: 100%; background-position: initial initial; background-repeat: initial initial;" id="frm"> 
     <p>Message 1</p> 
     <p>Message 2</p> 
     <p>Message 3</p> 
     <p>Message 4</p> 
     <p style="color:#fff">Message you want to see right now</p> 
     <p>Message 5</p> 
     <p>Message 6</p> 
     <p>Message 7</p> 
     <p>Message 8</p> 
</div> 

और जावास्क्रिप्ट हिस्सा:

<script type="text/javascript"> 
function init() 
{ 
    document.getElementById("setScroll").addEventListener('click',function() 
    { 
     document.getElementById("frm").style.top = -120;//Scroll by 120px 
    }); 
} 
</script> 

मैं 3.0 पर इस परीक्षण किया है और के 4.0 संस्करण एंड्रॉइड (मुझे कहना होगा कि यह एमुलेटर विचार पर था)।

आशा है कि इससे मदद मिलती है!

मूल संदेश:

स्क्रॉल शीर्ष सूचना दी here के रूप में एंड्रॉयड के कुछ संस्करणों में काम नहीं कर किया जा रहा है, और इस बारे में गूगल (से कोई निश्चित जवाब है लग रहा है मुख्य रूप से 3.0 और 4.0 में यह समस्या है की तरह, 2.3 और बोले या 4.1 प्रभावित नहीं लग रहे हैं)।

क्षमा करें, लेकिन ऐसा लगता है कि इस बग के लिए अभी कोई समाधान नहीं है।

Answer 2

क्षमा करें, मेरे पास कोई जवाब नहीं है और अभी तक कोई टिप्पणी छोड़ने के लिए प्रतिष्ठा स्तर आवश्यक नहीं है इसलिए मुझे इसे "उत्तर" के रूप में पोस्ट करना होगा। मैंने कामकाज खोजने की कोशिश करने में लंबे समय तक काम किया है, एक नहीं मिला है। मैंने एक टेस्ट पेज बनाया है जो कि क्या हो रहा है पर कुछ अंतर्दृष्टि देता है।

http://jsfiddle.net/RyLek/embedded/result/ < - DIV सेट स्क्रॉल

समस्या .scrollTop संपत्ति एक DIV में वर्तमान स्थिति को अपडेट नहीं हो जाता है जब आप नीचे स्क्रॉल है अतिप्रवाह के लिए - ऑटो http://jsfiddle.net/RyLek/2/embedded/result/ < अतिप्रवाह करने के लिए सेट div। साथ ही जब आप scrollTop प्रॉपर्टी सेट करते हैं तो यह वास्तव में DIV स्क्रॉल स्थिति को अपडेट नहीं करता है।

उपरोक्त उत्तर पर टिप्पणी "एटर कैल्डरन" टिप्पणी के जवाब में। मैंने ओवरफ्लो प्रॉपर्टी को स्क्रॉल करने के लिए सेट करने की कोशिश की (नमूना ऊपर देखें) और इसका कोई प्रभाव नहीं पड़ता है।

मैंने मैक्सथन और डॉल्फिन जैसे बाजार में कुछ तीसरे पक्ष के ब्राउज़र भी आज़माए हैं जिनके पास यह समस्या भी है। यदि आप एंड्रॉइड 4.0 आईसीएस डिवाइस चला रहे हैं तो आप Google Play Store से Google क्रोम ब्राउजर डाउनलोड कर सकते हैं, जो स्क्रॉलटॉप प्रॉपर्टी में काम करता है। यह मेरे लिए एक विकल्प नहीं है क्योंकि हमारी कंपनी में ज्यादातर हनीकॉम डिवाइस हैं जो इस ब्राउज़र का समर्थन नहीं करते हैं।

यहां एक प्रश्न है जो मैंने इस मुद्दे पर इस पिछले सप्ताह के बारे में पोस्ट किया था: jQuery scrollTop() does not work in scrolling DIV on mobile browsers, alternatives? प्रतिक्रिया सीएसएस में इसे आजमाने और कार्यान्वित करने के लिए थी जिसे मैं पूरा करने में सफल नहीं हुआ था।

Answer 3

ऐसा लगता है कि यह समस्या तब होती है जब ओवरफ़्लो प्रॉपर्टी 'स्क्रॉल' पर सेट होती है (जो एकमात्र समय है जिसे हम इसकी परवाह करेंगे)। मेरे लिए काम करने वाला एक वर्कअराउंड पहले 'छिपी हुई' पर ओवरफ्लो सेट करना था, स्क्रॉलटॉप सेट करना था, फिर ओवरफ्लो को 'स्क्रॉल' पर सेट करना था।

Answer 4

मुझे पृष्ठ के शीर्ष से एक विशिष्ट तत्व तक स्क्रॉल करने की आवश्यकता है, और .offset एंड्रॉइड & आईओएस के लिए मेरे लिए समाधान था। .scrolltop केवल आईओएस में काम किया।

$('html, body').animate({scrollTop: $('#element').offset().top + 20}, 10); 

Answer 5

मैं scrollTop() का उपयोग करते समय एंड्रॉइड समर्थन के लिए निम्न का उपयोग करता हूं। मेरे अनुभव में एक सार्वभौमिक फिक्स के रूप में बहुत अच्छी तरह से काम किया है।

सीएसएस:

.androidFix { 
    overflow:hidden !important; 
    overflow-y:hidden !important; 
    overflow-x:hidden !important; 
} 

जे एस:

$(yourSelector).addClass("androidFix").scrollTop(0).removeClass("androidFix"); 

Answer 6

का संभावित हल मेरे लिए था:

window.location.hash = '#element' + currentItem; 

आप एक विशिष्ट आईडी के साथ तत्व पर जा सकेंगे।

मुझे पता है कि हर किसी के लिए समाधान नहीं है, शायद मैं किसी की मदद कर सकता हूं।