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

Question

मैंने ज़ूमिंग और .scrollTop() पर कई प्रश्नों के माध्यम से पिछले घंटे बिताए हैं और हैंडलिंग के बदलाव और कम से कम 20 अलग-अलग चीजों की कोशिश की है - जो कुछ भी मेरी स्थिति के लिए दूरस्थ रूप से काम करने योग्य दिखता है और मैं अभी भी केवल आंशिक समाधान है।

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

स्थिति यह है कि बटन क्लिक करने के बाद और फॉर्म का दूसरा आधा दिखाई देता है, विंडो अभी भी ज़ूम हो गई है और आप पृष्ठ के यादृच्छिक पैच को देख रहे हैं।

मैं क्या कल्पना वहाँ दो handlings हो सकता है कर सकते हैं से

:
1) वास्तव में करने के लिए जहां प्रपत्र के अगले भाग

दिखाता है मैं सब कुछ करने की कोशिश की बटन
2) स्क्रॉल क्लिक करने के बाद ज़ूम आउट करके meta टैग में viewport content width को ज़ूम आउट करने और संभालने पर मुझे पता चल सकता है, लेकिन यह मेरे लिए इसे संभाल नहीं करता है क्योंकि यह व्यूपोर्ट को बड़ा या छोटा बनाता है और वास्तव में ज़ूम आउट नहीं करता है। संभावित रूप से यह दूसरों के लिए काम करता है लेकिन मेरे लिए नहीं, क्योंकि मेरे पास पहले से ही बहुत सारी स्टाइल है जो इसे विकल्प नहीं दे सकती है।

मैं स्क्रॉलिंग समाधान के लिए बस गया था और .scrollLeft() ठीक काम कर रहा है, लेकिन .scrollTop() इससे कोई फर्क नहीं पड़ता कि मैं इसे कौन सा चयनकर्ता देता हूं। मैं कोशिश की है:

$('body').scrollTop 
$('html').scrollTop 
$('document').scrollTop 
$('body,html,document').scrollTop 
$('html:not(:animated),body:not(:animated)').scrollTop 
$('html:not(:animated),body:not(:animated),document:not(:animated)').scrollTop 
$('#content').scrollTop // that's a wrapper div 
$(window).scrollTop 

किसी जानते हैं कि कैसे .scrollTop() सफारी मोबाइल में काम करने के लिए प्राप्त करने के लिए?

Answer 1

यह करने के लिए jQuery का उपयोग करने की आवश्यकता नहीं:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

तुम बस पेज आप कर रहे हैं पर ऐसा करना चाहते हो सकता है:

window.scrollTo(0, 0); 

तुम भी जूमिंग सब एक साथ का उपयोग कर मेटाटैग रोका जा सकता है समस्याओं का सामना करना पड़ रहा है?

Answer 2

क्या आपने एंकरों का उपयोग करने की कोशिश की?

उन्हें हर जगह काम करना चाहिए, क्योंकि वे ब्राउज़र के मूल कार्य हैं। इस कोड को here

$(function() { 
    $('a[href*="#"]:not([href="#"])').on('click', function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html, body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 

Answer 3

मुझे लगता है कि आप गलत तरीके से काम को हल करने की कोशिश कर रहे साथ

मूल पोस्ट। बस सुनिश्चित करें कि आपके फॉर्म फ़ील्ड में मोबाइल व्यूपोर्ट्स पर font-size: 16px है, इस प्रकार सफारी ज़ूम इन नहीं करेगा।

यदि आपके कंटेनर पर position: fixed है तो स्क्रॉलटॉप काम नहीं कर सकता है।