मोबाइल उपकरणों के लिए टेक्स्ट इनपुट फोकस पर स्क्रॉल पेज?

Question

मैं एक टेक्स्ट इनपुट के साथ मोबाइल अनुकूलित साइट बना रहा हूं जो आपके द्वारा टाइप की जाने वाली सूची फ़िल्टर करता है। इसके समान: http://jquerymobile.com/test/docs/lists/lists-search.html

फ़ोन के लिए, यदि आप इनपुट को चुने गए पृष्ठ को स्क्रॉल करते हैं तो यह उपयोगिता लाभ होगा, इसलिए इनपुट पृष्ठ के शीर्ष पर था। इस प्रकार जैसा कि आप टाइप करते हैं, उतनी ही नीचे दी गई सूची दिखाई देगी। क्या यह संभव है और/या किसी को भी ऐसा करने का अनुभव है? धन्यवाद

Answer 1

सहमत - यह उपयोगिता के लिए अच्छा होगा।

आप jQuery का उपयोग कर रहे हैं, यह चाल करना चाहिए:

$('#id-of-text-input').on('focus', function() { 
    document.body.scrollTop = $(this).offset().top; 
}); 

Answer 2

एक बेहतर समाधान हो जाएगा:

$('#id-of-text-input').on('focus', function() { document.body.scrollTop += this.getBoundingClientRect().top - 10 });

क्योंकि offsetTop (या .offset().top सर्वर का उपयोग कर यदि) वापसी पहले स्थान पैरेंट से दूरी, जहां आपको document के शीर्ष से दूरी की आवश्यकता है।

getBoundingClientRect().top तत्व व्यूपोर्ट तत्व के लिए स्थिति के बीच की दूरी देता है, यानी। यदि आप तत्व के नीचे 300px स्क्रॉल कर रहे हैं, तो यह -300 वापस आ जाएगा। तो += का उपयोग करके दूरी जोड़ना तत्व पर स्क्रॉल करेगा। -10 वैकल्पिक है - शीर्ष पर कुछ स्थान की अनुमति देने के लिए।