जावास्क्रिप्ट स्क्रॉलबार आवरण jQuery प्लगइन के रूप में

इस समस्या को हल करने के लिए डिज़ाइन किए गए स्क्रिप्ट की भारी संख्या के बावजूद, ब्राउज़र के स्क्रॉलबार को स्टाइल करने की समस्या अभी भी प्रासंगिक है। स्टाइलर स्क्रॉलबार के कार्यान्वयन पर विचार करें जो ब्राउज़र के मूल व्यवहार के जितना संभव हो उतना करीब है।

HTML / CSS का उपयोग करते हुए स्क्रॉलबार स्टाइल करने के लिए दो मुख्य दृष्टिकोण हैं, जिनमें से प्रत्येक में इसके पेशेवरों और विपक्ष हैं:

• जावास्क्रिप्ट अनुकरण स्क्रॉल
• देशी स्क्रॉल पर जावास्क्रिप्ट आवरण

जावास्क्रिप्ट अनुकरण स्क्रॉल

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

हालांकि, इस दृष्टिकोण की ताकत एक ही समय में इसकी कमजोरी है:

• सभी घटनाओं का अनुकरण / अवरोधन करने में कठिनाई या असमर्थता
• जावास्क्रिप्ट एमुलेशन देशी स्क्रॉल की तुलना में धीमा चलता है

देशी स्क्रॉल पर जावास्क्रिप्ट आवरण

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

इस दृष्टिकोण के अच्छे कार्यान्वयन में से एक हाल ही में विस्तृत विवरण के साथ एक सिस्टम स्क्रॉलबार के क्रॉस-ब्राउज़र अनुकूलन में लेख में वर्णित किया गया था।

ट्राइसाइकिल का आविष्कार

अगली बाइक बनाने का एक कारण यह था कि स्क्रॉल को स्टाइल करने के लिए स्क्रिप्ट की खोज में 20 से अधिक विभिन्न प्लगइन्स दिखाई दिए, जिनमें से कोई भी ऑर्डर किए गए प्रोजेक्ट के लिए उपयुक्त नहीं था। पृष्ठ पर बड़ी संख्या में आरंभिक स्क्रॉल के साथ धीमी गति से संचालन के कारण अधिकांश प्रसिद्ध प्लगइन्स फिट नहीं थे। असुविधाजनक कार्यान्वयन या अपर्याप्त क्रॉस-ब्राउज़र संगतता के कारण अन्य लोग फिट नहीं थे।

यह निर्णय लिया गया था कि उनका स्वयं का कार्यान्वयन निम्नलिखित आवश्यकताओं को पूरा करता है:

• स्क्रॉल व्यवहार को मूल के जितना संभव हो उतना करीब होना चाहिए
• ऊर्ध्वाधर और क्षैतिज स्क्रॉलबार
• न्यूनतम प्रोसेसर लोड
• HTML / CSS का उपयोग कर उपस्थिति की पूरी स्टाइलिंग
• अपने HTML संरचना को स्क्रॉलबार पर लागू करने की क्षमता, या स्क्रॉलबार के रूप में मौजूदा तत्व का उपयोग करने के लिए प्लगइन को बताएं
• स्क्रिप्ट को पुन: व्यवस्थित करने की आवश्यकता के बिना सामग्री को बदलते समय या कंटेनर का आकार बदलने पर स्क्रॉल को स्वचालित रूप से बदलना
• कंटेनर की चौड़ाई और ऊंचाई दोनों पिक्सेल और प्रतिशत में सेट की जा सकती है, या सीएसएस अधिकतम-ऊंचाई / अधिकतम-चौड़ाई द्वारा सीमित की जा सकती है
• स्क्रॉल कंटेनर के अंदर या बाहर कहीं भी स्थित हो सकता है
• स्क्रॉलबार आकार की स्वचालित गणना, या सीएसएस शैलियों के माध्यम से निर्धारित मूल्य
• IE7 +, फ़ायरफ़ॉक्स, क्रोम, ओपेरा, सफारी का समर्थन करें
• "आउट ऑफ़ द बॉक्स" की क्षमता मोबाइल ब्राउज़र के लिए स्क्रॉलिंग को अक्षम कर देती है

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

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

प्रदर्शन

स्रोत फ़ाइलें

लोकप्रिय स्क्रॉलबार की कार्यक्षमता की तुलना

टिप्पणी

यह याद रखना चाहिए कि कार्य करने के लिए स्टाइलर स्क्रॉलबार के लिए, एक निश्चित HTML संरचना की आवश्यकता होती है, जिसके लिए मूल जावास्क्रिप्ट कंटेनर को आरंभीकरण के दौरान दूसरे कंटेनर में लपेटा जाता है। इस कारण से, कुछ उपयोग पैटर्न, HTML संरचनाएं, और CSS शैलियाँ हैं:

1. स्रोत कंटेनर में इनलाइन शैलियाँ नहीं होनी चाहिए
2. कंटेनर के लिए पैडिंग / मार्जिन का उपयोग करने से बचें। यदि आपको इंडेंटेशन की आवश्यकता है, तो अंदर आवश्यक इंडेंटेशन के साथ एक और कंटेनर जोड़ना बेहतर है
3. कंटेनर की सामग्री को बदलते समय, आपको क्लास द्वारा कंटेनर का उपयोग नहीं करना चाहिए, क्योंकि इन वर्गों का उपयोग रैपर कंटेनर द्वारा किया जाएगा

मामूली खामियों में माउस व्हील के साथ स्क्रॉल ऊंचाई / चौड़ाई में अंतर शामिल होता है जब माउस कंटेनर की सामग्री (मूल व्यवहार) से ऊपर होता है और जब माउस स्क्रॉलबार (एम्यूलेटेड स्क्रॉल) से ऊपर होता है। ऐसे कई विचार हैं जिन्हें लागू करना काफी मुश्किल है, इसलिए मैं उन्हें "बाद के लिए" छोड़ देता हूं।

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

नोट

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

• IE8 में, अधिकतम-ऊंचाई का उपयोग करने वाले कीड़े: कुछ मामलों में, संस्करण 8 IE का रेंडरर क्रैश हो जाता है, या कंटेनर की ऊंचाई को अधिकतम-ऊँचाई (आधिकारिक संस्करण रिलीज़ बग) के बराबर बनाने की कोशिश करता है
• वेबकिट-ब्राउज़र (क्रोम, सफारी), पाठ का चयन करते समय, आंतरिक कंटेनर के माध्यम से स्क्रॉल करें, एक छिपे हुए स्क्रॉलबार को "उजागर"
• यदि सामग्री कंटेनर के आकार से अधिक है, तो सही और निचले पैडिंग का प्रदर्शन ब्राउज़र के विवेक पर रहता है
• प्लगइन्स की खोज करते समय, जल्दी से पता लगाने के लिए कि क्या मानक स्क्रॉलिंग तंत्र का उपयोग किया जाता है, बस माउस स्क्रॉल पर क्लिक करें, स्क्रॉल करने योग्य सामग्री के ऊपर होना

संस्करण 0.1.3 (20130425) के लिए अपडेट करें:

• बेहतर स्क्रॉल एमुलेशन: अब माउस व्हील के साथ एक स्क्रॉल किए गए स्क्रॉल पर स्क्रॉल करना स्वाभाविक रूप से एक प्राकृतिक स्क्रॉल पर काम करता है; जब आप स्क्रॉलबार सब्सट्रेट पर माउस को क्लिक करते हैं, तब व्यवहार भी बदल जाता है
• CSS पोजिशनिंग तय हो गई थी, जिसमें Google Chrome / Safari WebKit ब्राउज़रों में टेक्स्ट का चयन करते समय कंटेनर की "अतिरिक्त" शिफ्ट थी

संस्करण ०.१.४ (२०१३०३०) पर अपडेट करें:

• क्षैतिज स्क्रॉलबार पर माउस के साथ क्षैतिज स्क्रॉल ट्रैकिंग
• जब कंटेनर स्क्रॉल करता है तो पेज स्क्रॉलिंग को अक्षम करने के लिए अक्षम करेंबॉडीक्रॉल विकल्प। इस विकल्प में, मुझे ब्राउज़र के मूल व्यवहार को अक्षम करना पड़ा और जावास्क्रिप्ट के माध्यम से स्क्रॉल का अनुकरण करना पड़ा

संस्करण 0.1.6 (20131018) में अपडेट करें:

• मोबाइल उपकरणों पर स्क्रॉल आरंभीकरण को अनदेखा करने के लिए जोड़ा गया विकल्प
• टच डिवाइस पर स्क्रॉल करने के लिए अतिरिक्त ड्रैग सपोर्ट

संस्करण 0.1.7 (20140307) पर अपडेट करें:

• IE में 1-पिक्सेल गैप के साथ स्क्रॉलबार उपस्थिति को ठीक करने के लिए जोड़ा गया हैक

संस्करण 0.1.8 (20140308) पर अपडेट करें:

• यदि कंटेंट की ऊंचाई कंटेनर की ऊंचाई से कम है ( ऊंचाई वाले मामले: 100%)

संस्करण 0.1.9 (20140310) पर अपडेट करें:

• यदि सामग्री में ऊंचाई के साथ एक div है : एक ऊर्ध्वाधर स्क्रॉलबार प्रदर्शित करने के साथ एक बग फिक्स किया गया : 100%; अतिप्रवाह: छिपा हुआ; जिसके अंदर बाहरी कंटेनर की ऊँचाई से अधिक ऊँचाई वाला एक डिवोशन ( Evangeline Rei की प्रतिक्रिया और टिप्पणियों के लिए धन्यवाद)
• सामग्री / कंटेनर का आकार बदलने पर स्क्रॉलबार के स्वत: सुदृढीकरण के लिए जिम्मेदार स्वतःप्रमाण विकल्प जोड़ा गया

संस्करण 0.2.0 (20140312) पर अपडेट करें:

• मैन्युअल रूप से स्क्रॉलबार आकार पुन: परिकलित करने की क्षमता के लिए onUpdate विकल्प जोड़ा गया। इस विकल्प के लिए धन्यवाद, एक स्क्रॉलबार को पेज मैप के रूप में जोड़ा गया था
• चरण-दर-चरण विकल्प को चरण-दर-चरण स्क्रॉल करने के लिए ज़िम्मेदार जोड़ा गया है, जहां स्क्रॉलबार पर माउस बटन नीचे रखा गया है। यदि विकल्प अक्षम है, तो सामग्री को माउस के स्थान पर दाईं ओर स्क्रॉल किया जाएगा, अन्यथा, माउस को रखने के स्थान पर त्वरण के साथ चरण-दर-चरण स्क्रॉल हो जाएगा (स्क्रॉल व्यवहार का अनुकरण)
• स्क्रॉलबार को छुपाना / दिखाना पूरी तरह से सीएसएस में स्थानांतरित हो गया है
• onitit व्यवहार बदल गया है - अब फ़ंक्शन केवल एक बार प्रारंभ के दौरान शुरू होता है

संस्करण 0.2.1 (20140323) पर अपडेट करें:

• क्षैतिज स्क्रॉल दिखाई देने पर # एंकर तत्व को स्क्रॉल करने के साथ फिक्स्ड बग

संस्करण 0.2.2 (20140411) पर अपडेट करें:

• डिफ़ॉल्ट सेटिंग्स के साथ कई स्क्रॉलबार के आरंभ के साथ फिक्स्ड बग
• स्क्रॉल-तत्व_कॉन्सर तत्व सुविधाजनक सीएसएस कोने सेटिंग्स के लिए जोड़ा गया है, यदि दोनों स्क्रॉलबार दिखाई देते हैं

संस्करण 0.2.3 (20140703) पर अपडेट करें:

• ब्राउज़र में ज़ूम बदलते समय दृश्यमान स्क्रॉल के साथ फिक्स्ड बग
• सीएसएस * {बॉक्स-आकार: बॉर्डर-बॉक्स का उपयोग करते समय IE के लिए स्क्रॉलबार आकार के गलत आरंभीकरण के साथ निश्चित बग; }
• कॉलबैक फ़ंक्शन को onScroll जोड़ा, जिससे कंटेनर की स्क्रॉलिंग की डिग्री निर्धारित करना आसान हो जाता है
• स्क्रॉलबार का उपयोग उत्कृष्ट कोणीय.जेएस ढांचे के लिए एक निर्देश के रूप में किया जा सकता है
• प्लगइन लोड करने से पहले jQueryScrollbarOptions वैश्विक चर के माध्यम से डिफ़ॉल्ट मानों को ओवरराइड करने की क्षमता जोड़ा गया
• अनुकूलित कंटेनर आकार जांच

संस्करण 0.2.4 (20140715) के लिए अपडेट करें:

• अंततः TEXTAREA के लिए एक स्क्रॉलबार को स्टाइल करने की क्षमता जोड़ी