क्रॉसब्रोसर स्क्रॉलिंग

आज तक, स्क्रॉलिंग के प्रभाव ने काफी लोकप्रियता प्राप्त की है (तथाकथित लंबन )। लेकिन, दुर्भाग्य से, ये प्रभाव मूल रूप से मोबाइल उपकरणों द्वारा समर्थित नहीं हैं। बहुत समय पहले नहीं, मार्क डेल्गीश ने इस समस्या का अपना समाधान प्रस्तावित किया था:

पुस्तकालयों

टच लाइब्रेरी में से एक चुनें:
माटेयो स्पिनेली द्वारा iScroll
स्क्रॉल जो जो हेविट द्वारा
Zynga द्वारा Zynga Scroller

और मॉडर्निज़्र को कनेक्ट करें

आवरण

यदि आपकी पसंद iScroll पर गिरी है, तो आपको सामग्री को #wrapper और #scroller ब्लॉक के अंदर रखना चाहिए

<div id="wrapper"> <div id="scroller"> <ul> <li>...</li> </ul> </div> </div> 

मॉडर्निज़र का उपयोग करके एक टच डिवाइस को परिभाषित करें और इसके लिए एक नया iScroll उदाहरण बनाएं

 var myScroller = Modernizr.touch ? new iScroll('scroller') : null; 

शैलियों को जोड़ें

 #wrapper { overflow: auto; } /*  #wrapper  - */ /*  head.touch  Modernizer'       - */ .touch #wrapper { overflow: hidden; } 

स्क्रॉल स्थिति को सामान्य करने के लिए फ़ंक्शन

 function getScroll(elem, iscroll) { var x, y; if (Modernizr.touch && iscroll) { x = iscroll.x * -1; y = iscroll.y * -1; } else { x = elem.scrollLeft; y = elem.scrollTop; } return {x: x, y: y}; } 

अंतिम स्पर्श

 var myScroller = Modernizr.touch ? new iScroll('scroller') : null; (function animationLoop(){ window.requestAnimationFrame(animationLoop); var scroll = getScroll(window, myScroller); //       scroll.x; scroll.y; })(); 

आपको एनीमेशन के लिए requestAnimationFrame का उपयोग क्यों करना चाहिए