आईओएस पर सफारी में स्क्रॉल करते समय मैं स्क्रॉल स्थिति की निगरानी कैसे कर सकता हूं?

Question

मैं वर्तमान में $ (विंडो) .scrollTop() की निगरानी करने के लिए $(window).bind('scroll', foo); का उपयोग करता हूं और लंबन प्रभाव बनाने के लिए सामान करता हूं।

सभी डेस्कटॉप ब्राउज़र में foo() को प्रत्येक पिक्सेल उपयोगकर्ता स्क्रॉल के लिए बुलाया जाता है, और सब कुछ अच्छा और बेवकूफ है। आईओएस पर सफारी में स्क्रॉलिंग समाप्त होने के बाद स्क्रॉल इवेंट केवल निकाल दिया जाता है।

मैंने यह सुनिश्चित करने के लिए $(window).bind('touchmove', foo); जोड़ा कि यह सुनिश्चित करने के लिए कि आईओएस में स्वाइप के दौरान फ़ंक्शन कहा जाता है, और यह मुझे थोड़ा और आगे मिला। जब उपयोगकर्ता उंगली जारी करता है, तो पेज स्क्रॉल करना जारी रहता है, लेकिन ईवेंट फायरिंग बंद कर देता है।

कोई विचार?

Answer 1

जब मैंने आपका प्रश्न देखा, तो मैं इसके लिए पॉलीफिल करने की योजना बना रहा था (यदि ऐसा नहीं है?)। दुर्भाग्य से मेरे पास बहुत कम समय है।

विचार एक setInterval, जो ontouchstart शुरू किया जाता है के लिए है, और यह जाँच करता है document.body.scrollTop पिछली बार, जैसे के बाद से बदल गया है या नहीं। हर 20 मिलीसेकंड के लिए। और यदि यह है, तो हम स्क्रॉल घटना मैन्युअल रूप से प्रेषित करते हैं। अन्यथा हम clearInterval जाहिर है कि अब और स्क्रॉलिंग नहीं हो रही है।

यह संक्षेप में होगा। यदि आपको अधिक समय मिलता है (मैं करता हूं), तो उन दिशानिर्देशों के साथ प्रयास करने में संकोच न करें।

संपादित करें: अब, और पढ़ें, वही विचार दूसरे उत्तर पर सुझाव दिया जाता है। क्या आप निश्चित हैं कि आईपैड पर स्क्रॉल करते समय अंतराल रोक दिए जाते हैं?

Answer 2

यह jQuery के साथ ही एक बग हो सकता है: http://bugs.jquery.com/ticket/6446

टिकट थोड़ी देर के लिए खुला कर दिया गया है कि गया है और आईओएस 4 से संबंधित है, लेकिन शायद आप शुद्ध जावास्क्रिप्ट के साथ स्क्रॉल स्थिति की गणना की जाँच करनी चाहिए।

Answer 3

जैसा कि मुझे पता है कि अधिकांश मोबाइल उपकरणों पर स्क्रॉल करते समय कोई जावास्क्रिप्ट निष्पादन नहीं है। वहां कुछ कामकाज हैं (एफई आईस्कोल)। Iscroll सीएसएस-तकनीक "ट्रांसफॉर्म" का उपयोग कर रहा है। लेकिन स्क्रॉल करते समय जावास्क्रिप्ट निष्पादित करने का कोई तरीका नहीं है। मुझे लगता है कि चिकनी स्क्रॉलिंग-एल्गोरिदम बहुत महंगा है।

Answer 4

हालांकि इस बॉक्स से बाहर संभव नहीं है, तो बात करने के लिए, आप iscroll

तो का उपयोग कर ऐसा कर सकते हैं, तो आप iOS और Android मोबाइल उपकरणों/टेबलेट के लिए iScroll का उपयोग करेंगे, और जिस तरह से आप का उपयोग वर्तमान में डेस्कटॉप उपकरणों के लिए कर रहे हैं। जैसे कि 'onScrollMove', के रूप में 'onBeforeScrollEnd', 'onTouchEnd', आदि दुर्भाग्य से, वहाँ पर "हर स्थिति एक कॉलबैक निष्पादित करने के लिए एक विकल्प नहीं है -

iScroll विकल्पों में से एक गुच्छा कॉलबैक कार्यों के लिए कुछ घटनाओं पर बुलाया करने के लिए किया जाना है उपयोगकर्ता को स्क्रीन को छूने के बाद स्क्रॉलिंग की गति के कारण परिवर्तनों सहित परिवर्तनों को बदलें "। लेकिन, एक जोड़ने के लिए काफी आसान है।

onPosChange: null 

फिर, "_pos" समारोह के अंत में लाइन 308 के आसपास,:

iScroll स्रोत में, लाइन 127 के आसपास, "// घटनाक्रम" टिप्पणी के पास, एक नया वेरिएबल जोड़ने

if (this.options.onPosChange) this.options.onPosChange.call(); 

(है कि बस, समारोह "onPosChange" विकल्प में पारित कॉल करेंगे यदि वह मौजूद है): इस पंक्ति जोड़ें। ,

var myScroll; 
function loaded() { 
    myScroll = new iScroll('iscroll_container', { onPosChange: actOnScroll }); 
} 

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 

//Use this for high compatibility (iDevice + Android) 
document.addEventListener('DOMContentLoaded', function() { setTimeout(loaded, 200); }, false); 

function actOnScroll(){ 
    console.log('got a scroll move! Vert offset is: ' + myScroll.y); 
} 

नोट:

किया करने के बाद कि, निम्न उदाहरण कोड आईडी = "iscroll_container" के साथ div के लिए iScroll स्थापित करेगा, और कंसोल के लिए हर बार यह परिवर्तन वाई ऑफसेट प्रिंट होगा iScroll (वे iscroll का एक बहुत पुराने संस्करण का उपयोग और उसे ठीक वैसा मैं यहाँ वर्णित नहीं करते)

इसके अलावा का उपयोग करके आईपैड पर Ben the Bodyguard Parallax Site काम करता है, वास्तव में अच्छी तरह से आईपैड पर Life of Pi Parallax Site काम करता है - मैं बाहर कैसे समझ नहीं सकता कि वे ऐसा करो, लेकिन कम से कम यह साबित करता है कि यह संभव है!

Answer 5

आईफोन 5 सी के लिए ऐप्पल का वेबपृष्ठ कुछ लंबन स्क्रॉलिंग प्रभावों का उपयोग करता है जो आपकी उंगली को अभी भी स्क्रीन और स्क्रॉलिंग को छूने के साथ जारी रखने लगते हैं। तो मुझे लगता है कि स्क्रॉल के दौरान जावास्क्रिप्ट पूरी तरह से अक्षम नहीं किया जा सकता है। टमल्ट हाइप भी इस कार्यक्षमता प्रदान करता है।

Answer 6

मैं अत्यधिक "स्क्रॉलर" जावास्क्रिप्ट लाइब्रेरी का उपयोग करने की सलाह देता हूं। यह अब तक का सबसे अच्छा मोबाइल स्क्रॉलिंग एनीमेशन विकल्प है जिसे मैंने आज तक पाया है और उठना और जल्दी से चलना बहुत आसान है। एनीमेशन बनाएं और प्रारंभ और अंत स्क्रॉल स्थिति के आधार पर सीएसएस में हेरफेर करें। अधिकांश मानक सीपीयू गुणों के लिए आपको जितनी अधिक डेटा स्क्रॉल स्थिति और एनिमेशन बनाएं।

निम्न उदाहरण पृष्ठभूमि रंग एक 500 पिक्सेल पुस्तक के पाठ्यक्रम पर चेतन होगा में:

<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div> 

चेकआउट Git पर भंडार: https://github.com/Prinzhorn/skrollr

Skrollr डेमो उदाहरण: http://prinzhorn.github.io/skrollr/

बहुत बढ़िया वास्तविक दुनिया उदाहरण: http://www.fontwalk.de/03/