आईफोन पर स्क्रीन स्क्रॉल करने से <input> तत्व को रोकना?

Question

मेरे पास मेरे वेबपृष्ठ पर कई <input type="number"> तत्व हैं। मैं जेक्यू टच का उपयोग कर रहा हूं, और मैं हर समय पूर्णस्क्रीन रहने की कोशिश कर रहा हूं; वह है, क्षैतिज स्क्रॉलिंग खराब है। जब भी मैं <input> तत्व पर क्लिक करता हूं, तो पृष्ठ स्क्रीन के दाईं ओर एक काला सीमा दिखाता है और सबकुछ डी-केंद्रित करता है। इनपुट स्क्रीन के बाईं ओर ऑफसेट होते हैं, और वे पृष्ठ के मध्य की ओर कहीं भी शुरू होते हैं।

मैं इस स्क्रॉलिंग को फोकस पर कैसे रोक सकता हूं?

Answer 1

मैं सिर्फ इस पोस्ट में इस समस्या का समाधान मिल गया Stop page scrolling from focus

बस अपने इनपुट क्षेत्र के लिए onFocus="window.scrollTo(0, 0);" जोड़ सकते हैं और आप काम हो गया! (यह <textarea> और <input type="text" /> आईपैड पर साथ कोशिश की, लेकिन मैं बहुत यकीन है कि यह iPhone पर भी काम करेंगे हूँ।)

मुझे डर है कि स्क्रॉल एक झिलमिलाहट या कुछ और के रूप में दिखाई दे सकता था, लेकिन सौभाग्य से वह यह है कि मामला नहीं!

Answer 2

यहाँ

मैं कैसे iPhone (मोबाइल सफारी) पर इस हल है (मैं jQuery का इस्तेमाल किया)

1) एक वैश्विक चर है कि मौजूदा पुस्तक स्थान रखता है बनाते हैं, और हर बार उपयोगकर्ता स्क्रॉल व्यूपोर्ट अद्यतन किया जाता है जो

var currentScrollPosition = 0; 
$(document).scroll(function(){ 
    currentScrollPosition = $(this).scrollTop(); 
}); 

2) फोकस ईवेंट को प्रश्न क्षेत्र में बाध्य करें। ध्यान केंद्रित करते समय, दस्तावेज़ को वर्तमान स्थिति

$(".input_selector").focus(function(){ 
    $(document).scrollTop(currentScrollPosition); 
}); 

ता दा! कोई फोकस नहीं है "फोकस पर स्क्रॉल करें"

ध्यान में रखना एक बात है ... सुनिश्चित करें कि इनपुट फ़ील्ड कीपैड से ऊपर है, अन्यथा आप फ़ील्ड को छुपाएंगे। अगर एक क्लॉज जोड़कर इसे आसानी से कम किया जा सकता है।

Answer 3

मैं jQuery.animate() विधि linked to above का उपयोग करने की अनुशंसा करता हूं, न केवल window.scrollTo (0,0), क्योंकि आईओएस पृष्ठ तत्व ऑफसेट गुणों को एनिमेट करता है जब इनपुट तत्व केंद्रित होता है। कॉलिंग window.scrollTo() सिर्फ एक बार इस देशी एनीमेशन के समय के साथ काम नहीं कर सकता है।

अधिक पृष्ठभूमि के लिए, आईओएस pageXOffset और pageYOffsetwindow के गुणों को एनिमेट कर रहा है।

$('input,select').bind('focus',function(e) { 
    $('html, body').animate({scrollTop:0,scrollLeft:0}, 'slow'); 
}); 

Answer 4

हैं:, यह एक अधिक पूर्ण उदाहरण होगा

if(window.pageXOffset != 0 || window.pageYOffset != 0) { 
    // handle window offset here 
} 

तो, ऊपर उल्लिखित लिंक पर विस्तार करने के लिए: आप इन गुणों पर एक सशर्त जाँच प्रतिक्रिया करने के लिए कर सकते हैं, तो खिड़की स्थानांतरित हो गया है फोकस प्रोग्रामेटिक रूप से सेट किया जा रहा है, यह वही है जो मैं करता हूं:

फोकस बदलने से पहले विंडो के स्कॉलटॉप मूल्य को सहेजें। फिर फोकस सेट करने के तुरंत बाद सहेजे गए मूल्य पर scrollTop को पुनर्स्थापित करें।

हैं का उपयोग कर jQuery:

var savedScrollTop = $(document).scrollTop(); // save scroll position 
<code that changes focus goes here> 
$(document).scrollTop(savedScrollTop); // restore it 

Answer 5

इस प्रयास करें, मुझे लगता है कि समस्या जूम है:

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

की [स्क्रॉल अक्षम जब फोकस प्रपत्र तत्वों ipad वेब एप्लिकेशन को बदलने] (http