आईओएस ओवरफ्लो-स्क्रॉलिंग के साथ पृष्ठ स्क्रॉलिंग अक्षम करें:

Question

स्पर्श करें तो मान लें कि हम "वेब स्क्रीन में जोड़ें" के साथ एक मूल ऐप की तरह वेबपैप महसूस करना चाहते हैं। पहले चरण में से एक डिफ़ॉल्ट स्क्रॉलिंग को अक्षम करना है। आसान, सही?

// window or document 
window.addEventListener("touchmove", function(event) { 
    // no more scrolling 
    event.preventDefault(); 
}, false); 

जब तक आप मिश्रण करने के लिए overflow-scrolling जोड़ने यही कारण है कि सब ठीक है और अच्छा है। सटीक होने के लिए, आईओएस पर यह -webkit-overflow-scrolling: touch होगा।

/* #scrollable happens to be a ul */ 
#scrollable { 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
} 

घटना रोकथाम जोड़कर, एक कंटेनर में हार्डवेयर-त्वरित स्क्रॉलिंग कार्य नहीं करती है, स्पष्ट रूप से इच्छित प्रभाव नहीं है।

// you could do this for multiple elements, of course 
var scrollable = document.querySelector("#scrollable"); 
scrollable.addEventListener("touchmove", function(event) { 
    // no more bubbling :) 
    event.stopPropagation(); 
}, false); 

यह समाधान एक समस्या का परिचय है, लेकिन यदि आप छोड़ दिया स्क्रॉल करने के लिए प्रयास करें या #scrollable में ठीक है, इसे वापस डिफ़ॉल्ट स्क्रॉल श्रोता में बदल जाती:

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

अब क्या? मामले को बदतर बनाने के लिए, हम आदर्श (: touchstart पढ़ें): अलग-अलग li रों पर click संभाल या क्लिक-तरह की घटनाओं में सक्षम होगा

var items = scrollable.querySelectorAll("#scrollable li"); 
for (var item = 0; item < items.length; item++) { 
    items[item].addEventListener("touchstart", function() { 
     // handle the touch start 
    }, false); 
} 

इस समस्या को दूर करने के लिए, हम केवल click घटनाओं का उपयोग करने के बदल सकती है, लेकिन यह टैपिंग और प्रतिक्रिया के बीच देरी के कारण वेबपैप को "महसूस" करने का लक्ष्य डिफ़ॉल्ट करता है। इस समस्या के समाधान के लिए, हम touchstart और touchend के लिए एक घटना श्रोता जोड़ देंगे:

var items = scrollable.querySelectorAll("#scrollable li"); 
var activeItem = null, startTouch = null; 
for (var item = 0; item < items.length; item++) { 
    items[item].addEventListener("touchstart", function(event) { 
     startTouch = event.touches[0]; 
     activeItem = this; 
    }, false); 
    items[item].addEventListener("touchend", function(event) { 
     var touch = event.changedTouches[0]; 
     var deltaX = touch.pageX - startTouch.pageX 
     var deltaY = touch.pageY - startTouch.pageY; 
     // require the touchstart to be within 10 pixels of the touchend 
     if (deltaX * deltaX + deltaY * deltaY <= 100) 
      // handle "click" event 
    }, false); 
} 

कि सब ठीक है और अच्छा है, लेकिन हम अभी भी डिफ़ॉल्ट पृष्ठ स्क्रॉल कुछ touchmove घटनाओं का नियंत्रण लेने के साथ समस्या को हल नहीं किया है। कोई विचार?

Answer 1

इसलिए की तरह अपने window और scrollable तत्व श्रोताओं में तर्क के आसपास गमागमन कोशिश:

// window or document 
window.addEventListener("touchmove", function(event) { 
    if (!event.target.classList.contains('scrollable')) { 
    // no more scrolling 
    event.preventDefault(); 
    } 
}, false); 

// No special listeners needed on .scrollable elements 

इस तरह, आप केवल जब गैर स्क्रॉल तत्वों स्क्रॉल करने के लिए कोशिश कर रहा है डिफ़ॉल्ट को रोकने के।

आपको अभी भी एक समस्या होगी कि स्क्रॉल करने योग्य सामग्री के शीर्ष/नीचे ड्रैग शुरू करने से पूरे ऐप को "बाउंस" हो सकता है। इस समस्या को ठीक करने के लिए, Joe Lambert's ScrollFix देखें।