iPhone / iPad के लिए जावास्क्रिप्ट स्क्रॉल इवेंट?

Question

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

window.onscroll=myFunction;

document.onscroll=myFunction;

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

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

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

Answer 1

IPhoneOS onscrollईवेंट्स को कैप्चर करता है, जिस तरह से आप अपेक्षा नहीं कर सकते हैं।

onscrollजब तक पेज चलना बंद हो जाता है और रीड्रॉज- जैसा कि चित्र 6-1 में दिखाया जाता है, तब तक एक-उंगली पैनिंग किसी भी घटना को उत्पन्न नहीं करता है, जब तक उपयोगकर्ता पैनिंग बंद नहीं करता है - एक घटना उत्पन्न होती है।

इसी तरह, स्क्रॉल करने से onscrollरोकने के बाद ही 2 अंगुलियों से स्क्रॉल करें।

हैंडलर को स्थापित करने का सामान्य तरीका उदा

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 )

Comments

धन्यवाद, जिसने मुझे समस्या को आगे देखने के लिए मजबूर किया। वास्तविक उत्तर iphone / ipad पर व्यूपोर्ट के शीर्ष का पता लगा रहा था, केवल साथ काम करता है window.pageYOffset और document.body.scrollTop||document.documentElement.scrollTop अस्तित्व में हर दूसरे ब्राउज़र / हार्डवेयर की तरह नहीं ।

— ck_

IPAD पर @ck_ Unfortunatelly window.pageYOffsetमंदी के दौर में अद्यतन नहीं होता है, लेकिन केवल जब स्क्रॉल खत्म होता है।

— आदापाबी

यह सीधे window.onscroll को अधिलेखित करने के लिए बुरा अभ्यास है। एक इवेंट श्रोता जोड़ना बेहतर होगा। Window.addEventListener ('स्क्रॉल', फ़ंक्शन () {अलर्ट ('स्क्रॉल किया गया!';})) का उपयोग करें;

— केविन डाइस

अहम् .. वास्तव में, window.onscroll मेरे ipad पर अब हर समय फायर कर रहा है, जबकि पैनिंग, और पैनिंग के बाद, डीटेलरिंग करते समय। क्या कुछ बदला?

— कॉमनपाइक

सफारी (और शायद अन्य) iOS 8 के साथ WKWebView का उपयोग करने के लिए बदल गया। क्रोम और कॉर्डोवा अभी भी UIWebView का उपयोग करते हैं, इसलिए वे अभी भी लगातार स्क्रॉल इवेंट जारी नहीं होने के साथ समस्या का प्रदर्शन करते हैं। हालांकि कॉर्डोवा के लिए WKWebView प्लग-इन है।

— जीकू

Answer 2

IOS के लिए आपको टचमॉव इवेंट और साथ ही स्क्रॉल इवेंट का उपयोग करने की आवश्यकता है :

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
}

Comments

यह घटना केवल तब निकाल दी जाती है जब उपयोगकर्ता सक्रिय रूप से स्क्रॉल कर रहा होता है, यह गति स्क्रॉल के डेसेलेरेशन चरण के दौरान निकाल नहीं दिया जाता है।

— जॉन टिरसेन

मैंने iOS के लिए एंड स्क्रोल डिटेक्शन कोड को शामिल करने के लिए कोड को बदल दिया

— जॉर्ज फिलिप्पाकोस

आप "टचेंड" के लिए एक श्रोता जोड़ना चाह सकते हैं जो डेस्कटॉप पर स्क्रॉल करने के लिए समान होगा।

— बिंगबॉय

ध्यान दें कि यह स्क्रॉल चरण के दौरान पहुँच प्रदान नहीं करता है

— बेन सेवार्ड्स

तीन साल हो गए। मैं मंदी के दौरान स्क्रॉल स्थिति का एक वास्तविक अद्यतन प्राप्त नहीं कर सकता। मैं अपने नक्शे जैसे एप्लिकेशन को कैसे लिखूं? ?????

— फ्लेवरस्केप

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);

Comments

एक मान्य उत्तर को क्यों रद्द करें और इसके साथ समस्या को स्पष्ट करने वाली टिप्पणी न छोड़ें?

— डेव मैकिन्टोश

क्योंकि डाउनवोटिंग आसान और त्वरित है। : /

— जीशान अहमद

एक उत्तर इसके लेखक के अनुसार हमेशा "वैध" होता है ... कोई भी जानबूझकर अमान्य उत्तर नहीं देता है। लेकिन हां, उन्हें यह समझाना चाहिए था कि उन्होंने नीचा क्यों दिखाया।

— मैथ्यू चारबोनियर

gesturechangeईवेंट गैर मानक हैं और केवल सफारी द्वारा समर्थित हैं: developer.mozilla.org/en-US/docs/Web/Events/gesturechange

— निकोलस बवेरेटे

Answer 4

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

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

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

CSS: मैंने "टच" के लिए माडर्निज़्र वर्ग का उपयोग केवल उपकरणों को छूने के लिए मेरी शैली में परिवर्तन को लक्षित करने के लिए किया है (क्योंकि मैं केवल स्पर्श पर 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%;
}

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

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

आपको स्क्रॉल ऑफ़सेट देखने के बजाय, वर्तमान स्थिति प्राप्त करने के लिए myScroller का उपयोग करना होगा। यहाँ http://markdalgleish.com/pretations/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 सभी "क्लिक" घटनाओं को खाता है। मैंने iScroll को "टैप" ईवेंट से बाहर निकालने का विकल्प चालू किया और "क्लिक" ईवेंट के बजाय उन को संभाला। शुक्र है कि मुझे स्क्रॉल क्षेत्र में बहुत अधिक क्लिक की आवश्यकता नहीं थी, इसलिए यह कोई बड़ी बात नहीं थी।

Answer 5

चूंकि iOS 8 बाहर आया था, इसलिए यह समस्या अधिक नहीं है। स्क्रॉल इवेंट को अब आईओएस सफारी में भी सुचारू रूप से निकाल दिया गया है।

इसलिए, यदि आप scrollईवेंट हैंडलर को पंजीकृत करते हैं और window.pageYOffsetउस ईवेंट हैंडलर के अंदर जांच करते हैं , तो सब कुछ ठीक काम करता है।

Comments

यह कॉर्डोवा का उपयोग करने जैसे कुछ उपयोग मामलों में अभी तक मौजूद है। developer.telerik.com/featured/…

— diosney

मेरा अनुभव है कि यह अभी भी 2019 में आईओएस उपकरणों के साथ एक समस्या बनी हुई है।

— क्रिस