आईफोन/आईपैड के लिए जावास्क्रिप्ट स्क्रॉल इवेंट?

Question

मैं एक आईपैड पर स्क्रॉल घटना को कैप्चर नहीं कर सकता। इनमें से कोई भी काम नहीं, मैं क्या गलत कर रहा हूं?

window.onscroll=myFunction; 

document.onscroll=myFunction; 

window.attachEvent("scroll",myFunction,false); 

document.attachEvent("scroll",myFunction,false); 

वे सभी विंडोज़ पर सफारी 3 पर भी काम करते हैं। विडंबना यह है कि पीसी पर हर ब्राउज़र window.onload= का समर्थन करता है यदि आप मौजूदा घटनाओं को रोकना नहीं चाहते हैं। लेकिन आईपैड पर नहीं जाना।

Answer 1

आईफोनओएस onscroll घटनाओं को कैप्चर करता है, सिवाय इसके कि आप जिस तरह से उम्मीद कर सकते हैं। जब तक पेज चलती रुक जाता है और redraws-जैसा कि चित्र 6-1 में दिखाया गया है जब उपयोगकर्ता बंद हो जाता है पैनिंग-एक onscroll घटना उत्पन्न होता है

एक-उंगली पैनिंग किसी भी घटनाओं उत्पन्न नहीं करता है।

इसी प्रकार, 2 उंगलियों के साथ स्क्रॉल onscroll आग के बाद ही आप स्क्रॉल बंद कर दिया है।

प्रबंधक को इंस्टॉल की हमेशा की तरह काम करता है जैसे

window.addEventListener('scroll', function() { alert("Scrolled"); }); 
// or 
$(window).scroll(function() { alert("Scrolled"); }); 
// or 
window.onscroll = function() { alert("Scrolled"); }; 
// etc 

(यह भी देखें https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html)

Answer 2

आईओएस के लिए आप स्क्रॉल घटना इस तरह के रूप में रूप में अच्छी तरह touchmove घटना उपयोग करने की आवश्यकता: एक और जवाब जोड़ने के लिए

document.addEventListener("touchmove", ScrollStart, false); 
document.addEventListener("scroll", Scroll, false); 

function ScrollStart() { 
    //start of scroll event for iOS 
} 

function Scroll() { 
    //end of scroll event for iOS 
    //and 
    //start/end of scroll event for other browsers 
} 

Answer 3

क्षमा करें एक पुरानी पोस्ट के लिए, लेकिन मुझे आमतौर पर इस कोड का उपयोग करके स्क्रॉल इवेंट बहुत अच्छी तरह मिलता है (यह कम से कम 6.1 पर काम करता है)

element.addEventListener('scroll', function() { 
    console.log(this.scrollTop); 
}); 

// This is the magic, this gives me "live" scroll events 
element.addEventListener('gesturechange', function() {}); 

और यह मेरे लिए काम करता है। केवल एक चीज जो नहीं करती है वह स्क्रॉल के मंदी के लिए एक स्क्रॉल इवेंट देती है (एक बार जब मंदी पूरी हो जाती है तो आपको अंतिम स्क्रॉल इवेंट मिलता है, जैसा कि आप इसके साथ करेंगे।) लेकिन यदि आप

कर कर सीएसएस के साथ जड़ता को अक्षम करते हैं

-webkit-overflow-scrolling: none; 

आप नहीं, अपने तत्वों पर जड़ता मिलता है शरीर के लिए ही आप ऐसा करने के लिए हो सकता है क्लासिक

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

Answer 4

मैं के साथ, iScroll के साथ इस समस्या के लिए एक महान समाधान प्राप्त करने में सक्षम था गति स्क्रॉलिंग का सब कुछ और सब कुछ https://github.com/cubiq/iscroll गीथब दस्तावेज़ महान है, और मैं ज्यादातर इसका पालन करता हूं। मेरे कार्यान्वयन का विवरण यहां दिया गया है।

HTML: मुझे लगता है कि iScroll उपयोग कर सकते हैं कुछ divs में मेरी सामग्री की स्क्रॉल करने योग्य क्षेत्र लिपटे:

<div id="wrapper"> 
    <div id="scroller"> 
    ... my scrollable content 
    </div> 
</div> 

सीएसएस: मैं मेरी शैली को लक्षित करने के "स्पर्श" के लिए Modernizr वर्ग के लिए इस्तेमाल किया केवल डिवाइस को स्पर्श करने के लिए परिवर्तन (क्योंकि मैंने केवल स्पर्श पर iScroll को तुरंत चालू किया)।

.touch #wrapper { 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    overflow: hidden; 
} 
.touch #scroller { 
    position: absolute; 
    z-index: 1; 
    width: 100%; 
} 

जे एस: मैं iScroll डाउनलोड से iscroll-probe.js शामिल, और फिर उस नई पुस्तक स्थिति के प्रति प्रतिक्रिया के रूप में नीचे है, जहां updatePosition मेरी समारोह है स्क्रोलर प्रारंभ।

# coffeescript 
if Modernizr.touch 
    myScroller = new IScroll('#wrapper', probeType: 3) 
    myScroller.on 'scroll', updatePosition 
    myScroller.on 'scrollEnd', updatePosition 

आप myScroller का उपयोग करने के बजाय स्क्रॉल ऑफसेट को देखने का, अब वर्तमान स्थिति प्राप्त करने के लिए किया है। यहाँ एक समारोह http://markdalgleish.com/presentations/embracingtouch/ से लिया (एक सुपर उपयोगी लेख है, लेकिन अब पुराने हो चुके एक छोटे से)

function getScroll(elem, iscroll) { 
    var x, y; 

    if (Modernizr.touch && iscroll) { 
    x = iscroll.x * -1; 
    y = iscroll.y * -1; 
    } else { 
    x = elem.scrollTop; 
    y = elem.scrollLeft; 
    } 

    return {x: x, y: y}; 
} 

केवल अन्य पकड़ लिया गया था कभी-कभी मैं अपने पृष्ठ है कि मैं करने के लिए स्क्रॉल करने के लिए कोशिश कर रहा था का हिस्सा खो देगा है, और यह स्क्रॉल करने से इंकार कर देगा। जब भी मैंने #wrapper की सामग्री को बदल दिया, और समस्या को हल किया, तो मुझे myScroller.refresh() में कुछ कॉल जोड़ना पड़ा।

संपादित करें: एक अन्य गोचा था कि iScroll सभी "क्लिक" घटनाओं को खाता है। मैंने आईएसक्रॉल को "टैप" ईवेंट उत्सर्जित करने का विकल्प चालू कर दिया और "क्लिक" ईवेंट के बजाय उन्हें संभाला। शुक्र है कि मुझे स्क्रॉल क्षेत्र में ज्यादा क्लिक करने की आवश्यकता नहीं थी, इसलिए यह एक बड़ा सौदा नहीं था।