🤱 🛵 🐝 सिस्टम स्क्रॉलबार का क्रॉस-ब्राउज़र अनुकूलन 🧡 👩‍🎤 🎶

स्थिर आकार की एक स्क्रीन, या खिड़की पर निरंतर मात्रा की सामग्री रखने की समस्या कई दशकों से मौजूद है। उसी राशि के बारे में इस समस्या का एक बेहतर समाधान है: GUI तत्व एक स्क्रॉलबार है।

कट के तहत, आप यह पता लगा सकते हैं कि निकट भविष्य में 2GIS ऑनलाइन में स्क्रॉल कैसे काम करेगा।

सिस्टम स्क्रॉल तंत्र को ऑपरेटिंग सिस्टम की बुनियादी क्षमताओं के स्तर पर लागू किया जाता है, इसलिए हम विश्वास के साथ कह सकते हैं कि यह हमेशा js emulation से बेहतर है: यह अधिक कुशल है, जावास्क्रिप्ट से स्वतंत्र रूप से काम करता है और विभिन्न प्रकार के उपकरणों के लिए सिस्टम के सभी आवश्यक "सुविधाओं" को लागू करता है।

सिस्टम स्क्रॉलबार का डिज़ाइन, विशेष रूप से विंडोज 8 संस्करण के तहत, इंटरनेट साइटों के एक महत्वपूर्ण हिस्से को भंग करने में सक्षम है। तथ्य यह है कि हर कोई इससे सहमत नहीं है, इस तथ्य से पुष्टि की जाती है कि बड़ी संख्या में समाधान हैं जो प्रोग्राम स्क्रॉलबार को कस्टम में बदल देते हैं।

अब 2 जीआईएस ऑनलाइन में (और, तदनुसार, 2 जीआईएस एपीआई में ) हम फ्लेक्सक्रोल का उपयोग करते हैं: यह स्क्रॉल तंत्र का अनुकरण करता है और कई कारणों से हमें सूट नहीं करता है:

यह एक क्रॉस-प्लेटफ़ॉर्म समाधान नहीं है (विशेष रूप से, यह मैक पर खराब काम करता है)
सिद्धांत रूप में किसी भी एमुलेटर की तरह, इसमें प्रदर्शन समस्याएं हैं
इसमें बिल्ट-इन कैप्शन लॉकिंग मैकेनिज्म नहीं है।

इन सभी कारकों ने हमें दो मुद्दों के बारे में सोचने पर मजबूर किया:

क्या हमारे लिए एक तैयार समाधान है, या क्या हमारा खुद का बनाना आवश्यक है?
क्या यह संभव है, सिद्धांत रूप में, स्क्रॉल के सिस्टम तंत्र को बनाए रखने के लिए, लेकिन इसके डिजाइन को पूरी तरह से बदल दें?

हमने एक समाधान के लिए बुनियादी आवश्यकताओं का गठन किया है जो स्क्रॉलबार के दृश्य प्रतिनिधित्व को बदलना चाहिए:

स्क्रॉल के सिस्टम तंत्र को संरक्षित किया जाना चाहिए: केवल इसका डिज़ाइन सुधार के अधीन है।
सभी निर्भरताओं का कुल आकार कम से कम होना चाहिए। आदर्श मामले में, उन्हें बिल्कुल भी नहीं होना चाहिए। समाधान का आकार कम से कम होना चाहिए।
सामग्री के हेडर को ठीक करने के लिए एक तंत्र होना चाहिए जब वे देखने के क्षेत्र से परे जाते हैं, या इस तरह के तंत्र को जोड़ने के लिए एक सरल इंटरफ़ेस (इस मद पर अधिक के लिए नीचे देखें)।

प्रतिबंध

लेखन के समय, सीएसएस का उपयोग करते हुए स्क्रॉलबार का अधिक या कम लचीला अनुकूलन वेबकिट इंजन का उपयोग करने वाले ब्राउज़र में ही संभव है। स्क्रॉलबार के रंगों को इंटरनेट एक्सप्लोरर में बदला जा सकता है। अन्य ब्राउज़रों में, CSS के माध्यम से स्क्रॉलबार को कस्टमाइज़ करने का समर्थन पूरी तरह से अनुपस्थित है। यह आंशिक रूप से कठिन w3c स्थिति के कारण है:

कुछ चीजें हैं जो सीएसएस को नहीं करना चाहिए, पूर्ण विराम।

मौजूदा समाधान

बड़ी संख्या में js पुस्तकालयों में से आधे से अधिक देशी स्क्रॉल तंत्र की जगह लेते हैं। इसका मतलब यह है कि आवरण के लिए, अतिप्रवाह संपत्ति छिपी हुई है, और सामग्री के साथ नेस्टेड कंटेनर हमें स्क्रॉल से संबंधित घटनाओं को उत्पन्न करते समय इसकी पूर्ण स्थिति को बदलने की आवश्यकता है (उदाहरण के लिए, मूसवेल)। इस तरह के समाधान में शामिल हैं: jScrollPane , स्क्रॉलबार पेपर , jQuery कस्टम स्क्रॉलबार प्लगइन , फ्लेक्सक्रोल , टाइनी स्क्रॉलबार और कई अन्य।

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

यह स्क्रॉल एमुलेशन की ये कमियां हैं जिसके कारण हमें आवश्यकताओं के पहले बिंदु को तैयार करना पड़ा।

कई समाधान शुरू में jQuery के प्लगइन्स के रूप में तैनात हैं। ऐसी स्थिति में जहां हम भागों में jQuery का उपयोग करते हैं, वहाँ यातायात को बचाने की समस्या है। यदि प्लगइन बहुत अधिक हैवीवेट jQuery UI पर निर्भरता रखता है तो समस्या काफी बढ़ जाती है। यह लागू होता है, उदाहरण के लिए, शॉर्टस्क्रोल और वर्टिकल स्क्रॉल के लिए। और कई अन्य पुस्तकालयों से भी: उदाहरण के लिए, देशी स्क्रॉल तंत्र को बनाए रखने वाले कुछ jQuery प्लगइन्स में से एक, स्क्रॉलबार, 4 प्लगइन्स पर निर्भर करता है: Event.drag, resize, mousehold और mewewheel 10 kb से अधिक के कुल वजन के साथ।

आवश्यकताओं का तीसरा बिंदु हमारे द्वारा पाए गए किसी भी समाधान से संतुष्ट नहीं है।

खुद का फैसला

समाधान के दो मुख्य कार्य हैं: 1) सिस्टम स्क्रॉलबार को छिपाएं और 2) कस्टम स्क्रॉलबार प्रदर्शित करें।

सादगी के लिए, हम केवल एक ऊर्ध्वाधर स्क्रॉलबार पर विचार करेंगे - हमारे मामले में, जैसा कि अधिकांश अन्य में, हमें केवल इसकी आवश्यकता है। इसके अलावा, यह आउटपुट कोड की मात्रा को बचाता है। क्षैतिज स्क्रॉलबार के मामले में, तर्क सादृश्य द्वारा विस्तारित होता है।

शुरू करने के लिए, आइए एक HTML संरचना बनाएँ:

<div class='wrapper' id='wrapper'> <div class='scroller' id='scroller'> <article class='container' id='container'> </article> </div> </div>

जहां कंटेनर है, वास्तव में, हम क्या स्क्रॉल करना चाहते हैं; स्कोरर - एक ब्लॉक जिसमें कंटेनर ऊंचाई में फिट नहीं होता है, लेकिन इसमें अतिप्रवाह-वाई है: संपत्ति सेट स्क्रॉल करें, जो इसकी सही सीमा पर एक सिस्टम स्क्रॉलबार की उपस्थिति की ओर जाता है; आवरण - एक खिड़की जिसकी चौड़ाई थोड़ी सी कम होती है, जो घुमक्कड़ और अतिप्रवाह: छिपी हुई संपत्ति। चौड़ाई स्कोरर की चौड़ाई की तुलना में कम है।

दुर्भाग्य से, सीएसएस के साथ, सिस्टम स्क्रॉलबार की सही चौड़ाई जानना संभव नहीं है। उदाहरण के लिए, स्कोरर के लिए 125% और कंटेनर के लिए 80% की चौड़ाई सेट करने का विकल्प काम नहीं करता है, जिसमें, ऐसा प्रतीत होता है, कंटेनर और आवरण की चौड़ाई बिल्कुल मेल खाना चाहिए। आप स्कोरर को स्पष्ट रूप से व्यापक बना सकते हैं, और एक ही चौड़ाई में रैपर और कंटेनर सेट कर सकते हैं, लेकिन यह विधि रबर टाइपिंग के लिए उपयुक्त नहीं है और वेबकिट ब्राउज़र में एक बग उत्पन्न करता है (नीचे देखें)।

हम js चर पेश करते हैं:

 var wrapper = document.getElementById('wrapper'), scroller = document.getElementById('scroller'), container = document.getElementById('container');

अब हम सिस्टम स्क्रॉलबार की चौड़ाई की गणना कर सकते हैं: scroller.offsetWidth सीमा, पैडिंग, साथ ही सिस्टम स्क्रॉलबार सहित स्क्रोलर की चौड़ाई है। यदि हम CSS का उपयोग करके सीमा और गद्दी को शून्य करते हैं, और scroller.clientWidth को घटाते हैं, तो हमें पिक्सल में वांछित स्क्रॉलबार चौड़ाई मिलती है।

वेबकिट ब्राउज़र में, एक ऐसी सुविधा है जो तत्वों को क्षैतिज दिशा में पाठ का चयन करते समय स्क्रॉल करती है, यहां तक कि अतिप्रवाह-एक्स के साथ: छिपा हुआ। यही है, स्कोरर क्षैतिज रूप से छोटे आवरण के अंदर स्थानांतरित करना शुरू कर देता है, जिसके परिणामस्वरूप हमारे द्वारा छिपाए गए सिस्टम स्क्रॉलबार को उजागर किया जाता है। सौभाग्य से, वेबकिट ब्राउज़रों में, और केवल उन में, हम CSS का उपयोग करके स्क्रॉलबार की चौड़ाई को रीसेट कर सकते हैं, जिसके बाद सभी तीन ब्लॉकों की चौड़ाई बिल्कुल मेल खाएगी और क्षैतिज स्क्रॉल के लिए बस कोई जगह नहीं होगी:

 .scroller::-webkit-scrollbar { width: 0; }

अब एक कस्टम स्क्रॉलबार ड्रा और पोजिशन करें। ऐसा करने के लिए, हम 1 तत्व के लिए HTML संरचना की जटिलता को कम करते हैं, जो स्क्रॉलबार के दृश्य प्रतिनिधित्व के लिए पूरी तरह से जिम्मेदार होगा:

 <div class='wrapper' id='wrapper'> <div class='scroller' id='scroller'> <article class='container' id='container'> </article> <div class='scroller__bar'></div> </div> </div>

यहां यह ध्यान रखना महत्वपूर्ण है कि हमारे कार्य के लिए हमें बटन और नीचे और साथ ही अंतर्निहित ट्रैक को खींचने की आवश्यकता नहीं थी। हालांकि, उनके कार्यान्वयन के लिए कोई प्रतिबंध नहीं हैं।

खींचे गए कस्टम स्क्रॉलबार के ड्रैग को कार्यान्वित करते समय, मुख्य बात यह है कि स्क्रॉल करने योग्य सामग्री के अंदर पाठ का चयन निषिद्ध है। ऐसा करने के लिए, बस इस तरह के एक बंधन बनाएं:

 function dontStartSelect() { return false; } function selection(on) { if (on) { $(document).on('selectstart', dontStartSelect); } else { $(document).off('selectstart', dontStartSelect); } } event(bar, 'mousedown', function(e) { e.preventDefault(); selection(false); // Disable text selection in IE8 }); event(document, 'mouseup blur', function() { selection(true); // Enable text selection in IE8 });

जैसा कि आप देख सकते हैं, IE8 ब्राउज़र के लिए अधिकांश कोड की आवश्यकता होती है, जो दुर्भाग्य से, अभी तक छूट नहीं दी जा सकती है। कृपया ध्यान दें कि माउस के "दबाए गए" स्थिति का रीसेट न केवल तब होगा जब माउस बटन रिलीज़ हो, लेकिन यह भी जब पृष्ठ फोकस (धुंधला) खो देता है।

चिपचिपा हेडर

कंटेनर के अंदर कुछ तत्व हमेशा उपयोगकर्ता को दिखाई देने चाहिए। उदाहरण के लिए, यह किसी लेख के अनुभागों का शीर्षक हो सकता है, जब क्लिक किया जाता है (यह एक अतिरिक्त कार्यक्षमता है जो समाधान से परे जाती है), सामग्री क्लिक की गई हेडिंग के लिए "रीवाउंड" होगी।

न तो पूर्ण (स्कॉलर के सापेक्ष) और न ही रिश्तेदार (अपने प्रारंभिक पदों के सापेक्ष) अपने शुद्ध रूप में शीर्ष स्थिति इस मामले में उपयुक्त है। पहला शीर्षक के आसपास की सामग्री के घिसने और स्क्रॉल करने पर संबंधित झटके के कारण होता है; दूसरा स्क्रॉल करने के लिए इंटरनेट एक्सप्लोरर ब्राउज़र में देशी घातक संक्रमणों के कारण है, जो सभी रिकॉर्ड किए गए हेडर की घबराहट का कारण बनता है।

इस संबंध में, html संरचना को थोड़ा अधिक जटिल होना था, सभी हेडर को रैपर में लपेटना, जिसका कार्य हेडर के नीचे स्थान को बचाना है जब वे पूर्ण स्थिति द्वारा निर्धारण के दौरान धारा से हटा दिए जाते हैं। सिद्धांत रूप में, शीर्षकों और अनुभागों के लिए नकारात्मक मार्जिन का चयन करके एक समान परिणाम प्राप्त किया जा सकता है जिससे वे संबंधित हैं - फिर आप शीर्ष लेखों के बिना कर सकते हैं।

प्रत्येक शीर्षक के लिए प्रत्येक स्क्रॉल के लिए, स्थिति की जांच करना आवश्यक है:

 scroller.scrollTop - H[i].offsetTop > Sum(H[j].offsetHeight, j=0..i-1) scroller.scrollTop - H[i].offsetTop < scroller.clientHeight - Sum(H[j].offsetHeight, j=i..n-1)

जहाँ H शीर्ष लेख तत्वों का एक सरणी है; मैं शीर्ष लेख संख्या है, 0 से n-1 की सीमा में भिन्न है; scroller.scrollTop - कंटेनर की ऊपरी सीमा से कंटेनर की दृश्य सीमा के ऊपरी सीमा तक आभासी दूरी; H [i] .offsetTop - हेडर की ऊपरी सीमा से कंटेनर की ऊपरी सीमा से दूरी H [i]।

दोनों स्थितियों की पूर्ति का मतलब है कि हेडर मैं कहीं दिखाई क्षेत्र में है, स्थिति में अन्य हेडर के साथ संघर्ष नहीं करता है, और इसके निर्धारण की आवश्यकता नहीं है। पहली स्थिति के उल्लंघन का मतलब है कि शीर्ष ऊपर से छिपाने की कोशिश कर रहा है, और दूसरा - नीचे से। दोनों मामलों में, निर्धारण आवश्यक है।

चंचल घटना फेंकना

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

सौभाग्य से, वेबकिट ब्राउज़र में (और हमें केवल उन्हें एक्सेस करने की आवश्यकता है) ऐसा अवसर है:

 $(headers).on('mousewheel', function(e) { var evt = document.createEvent('WheelEvent'); evt.initWebKitWheelEvent(e.originalEvent.wheelDeltaX, e.originalEvent.wheelDeltaY); scroller.dispatchEvent(evt); //    scroller e.preventDefault(); //    });

बेशक, यह कोड का एक संक्षिप्त संस्करण है: संबंधित कार्यों की उपलब्धता और घटना के प्रकार की जांच करना आवश्यक है ताकि अन्य ब्राउज़रों में त्रुटियां उत्पन्न न हों।

उदाहरण

जेएस कोड और निर्भरता की मात्रा को कम करने के लिए, एक दृष्टिकोण का उपयोग किया गया था जिसमें पुस्तकालय एक jQuery प्लगइन नहीं है, हालांकि यह डिफ़ॉल्ट रूप से इसका उपयोग करता है।

उदाहरण के लिए, सरलतम मामले में (हेडर को ठीक किए बिना), आरंभीकरण इस तरह दिखता है:

 baron($('.wrapper'), { scroller: '.scroller', container: '.container', bar: '.scroller__bar' });

और $ ('रैपर') HTML ऑब्जेक्ट की एक सरणी हो सकती है - उनमें से प्रत्येक को आरंभीकृत किया गया है।

यदि आप हेडर ठीक करना चाहते हैं, तो स्क्रॉलबार की शीर्ष स्थिति को प्रतिबंधित करें, और jQuery विकल्प का उपयोग करें, आरंभीकरण थोड़ा विस्तृत है:

 baron($('.test_advanced'), { scroller: '.scroller', container: '.container', bar: '.scroller__bar', barOnCls: '.scroller__bar_state_on', // ,  ,      barTop: 40, //     header: '.header__title', hFixCls: 'header__title_state_fixed', // ,    selector: qwery, //  event: function(elem, event, func, off) { //   if (off) { bean.off(elem, event, func); } else { bean.on(elem, event, func); } }, dom: bonzo //     DOM });

मुझे इवेंट मैनेजर के लिए एक रैपर बनाना था, क्योंकि इसका इंटरफ़ेस अलग-अलग पुस्तकालयों में अलग-अलग है। सिद्धांत रूप में, आप addEventListener जैसे मूल कार्यों को लपेट सकते हैं और विशेष इवेंट मैनेजर को छोड़ सकते हैं।

परीक्षण

परीक्षण में विंडोज़, मैक और आईओएस प्लेटफार्मों पर क्रोम, फ़ायरफ़ॉक्स, ओपेरा, सफारी और इंटरनेट एक्सप्लोरर (आईई) के वर्तमान ब्राउज़र संस्करणों को शामिल किया गया (ज़ाहिर है, केवल मौजूदा ब्राउज़र संस्करणों का परीक्षण किया गया था :))। इसके अलावा, IE9 और IE8 का परीक्षण किया गया था। सभी ब्राउज़रों पर सभी परीक्षण ठीक गुजरते हैं।

इस आलेख में प्रस्तावित समाधान की ख़ासियत यह है कि जावास्क्रिप्ट में कुछ त्रुटियों के मामले में भी, स्क्रॉल अभी भी काम करेगा, क्योंकि यह प्रणालीगत है, इसलिए केवल एंड्रॉइड और ओपेरा मिनी के पुराने संस्करणों के ब्राउज़र जोखिम श्रेणी में आते हैं, जिसमें सिस्टम तत्वों पर स्क्रॉल करता है। लागू नहीं किया गया है, या खराब तरीके से लागू किया गया है।

परिणाम

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

नुकसान में क्षैतिज स्क्रॉलबार की कमी और ऊर्ध्वाधर नियंत्रण के लिए नियंत्रण शामिल हैं।

समाधान कोड Github से डाउनलोड किया जा सकता है।
डेमो ।

मार्च के प्रारंभ में इस निर्णय का कार्यान्वयन निर्धारित है।

सिस्टम स्क्रॉलबार का क्रॉस-ब्राउज़र अनुकूलन