एक ब्राउज़र में स्क्रॉलबार का अनुकूलन: HTML, सीएसएस, जेएस प्रौद्योगिकियों और प्रयोज्य के बीच एक समझौता

सभी को बधाई!

लेख डिजाइनर के महत्वाकांक्षी विचारों की प्राप्ति के लिए ब्राउज़र स्क्रॉलबार को अनुकूलित करने की समस्या को हल करने के लिए समर्पित है। लेख उन लोगों के लिए है जो html, css, js Technologies में धाराप्रवाह हैं, क्योंकि प्रस्तावित समाधान उनके समझौता उपयोग पर आधारित है।



निम्नलिखित कार्यों और लक्ष्यों को लेख में वर्णित और हल किया जाएगा:

• किसी तत्व को स्क्रॉल करने और आकार बदलने पर न्यूनतम जावास्क्रिप्ट गणना
• ब्राउज़र पार करें और मोबाइल ब्राउज़र पर काम करें
• उपयोग में आसानी, अनुकूलन और कार्यान्वयन
• सामग्री का चयन करते समय सामग्री के व्यवहार को ध्यान में रखते हुए
• सामग्री को अपडेट, बदलते या लोड करते समय स्क्रॉलबार मापदंडों को अपडेट करना
• अपनी विंडो की चौड़ाई बदलते समय ब्राउज़र सामग्री के मानक व्यवहार को बायपास करें

पहचान। सिस्टम स्क्रॉलिंग की विशेषताएं।

ताकि निर्माण करने के लिए कुछ हो, मैं एक सरल उदाहरण दूंगा ( कार्य में देखें ):

<div style="border: 3px solid #f08080; height: 300px; overflow: auto; width: 300px;"> <div style="background-color: #90ee90; border: 10px solid #4169e1; min-height: 600px; min-width: 600px;"> content... </div> </div> 

इस क्षेत्र में सामग्री नेविगेट करने के लिए ब्राउज़र निम्नलिखित विशेषताएं प्रदान करता है (मैं आपको उन सभी की कोशिश करने की सलाह देता हूं):

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

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

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

So.

समाधान में html में निम्नलिखित संरचना है:

 <div class="scrollar"> <div class="scrollar-viewport"> <div class="scrollar-systemscrolls"> <div class="scrollar-contentwrap"> <div class="scrollar-content"></div> </div> </div> </div> <div class="scrollar-scroll scrollar-vscroll"> <div class="scrollar-btn scrollar-btnup"></div> <div class="scrollar-btn scrollar-btndown"></div> <div class="scrollar-track scrollar-vtrack"> <div class="scrollar-thumb scrollar-vthumb"></div> </div> </div> <div class="scrollar-scroll scrollar-hscroll"> <div class="scrollar-btn scrollar-btnleft"></div> <div class="scrollar-btn scrollar-btnright"></div> <div class="scrollar-track scrollar-htrack"> <div class="scrollar-thumb scrollar-hthumb"></div> </div> </div> <div class="scrollar-corner"></div> </div> 

स्क्रॉलर समाधान के नाम और नामस्थान पर लैंडिंग पृष्ठ पर शैलियों के प्रतिच्छेदन को समाप्त करने के लिए एक ही समय में नाम है जहां समाधान का उपयोग किया जा सकता है।



इसे स्पष्ट करने के लिए, मैं संरचना की व्याख्या करूंगा:

• रूट ब्लॉक संपूर्ण संरचना के लिए एक आवरण है और संपूर्ण रूप में संपूर्ण संरचना के क्षेत्र और आयाम को निर्धारित करता है;
• व्यूपोर्ट - सामग्री देखने का क्षेत्र इस ब्लॉक तक सीमित है;
• systemcrolls - यह ब्लॉक स्क्रॉलिंग सामग्री के लिए जिम्मेदार है;
• contentwrap एक सुधार ब्लॉक है (इसके अर्थ और नीचे की क्षमताओं के बारे में);
• सामग्री - सामग्री ही;
• vtr और htrack - ऊर्ध्वाधर और क्षैतिज स्क्रॉलबार। उनकी सामग्री के साथ, और इसलिए सब कुछ स्पष्ट है।

अब आप मुख्य बिंदुओं पर विचार करना शुरू कर सकते हैं ...

प्रमुख बोझ: स्क्रॉल और आकार का संचालन

मेरी राय में, जावास्क्रिप्ट कार्यान्वयन में ये सबसे "कठिन" और असुविधाजनक संचालन हैं। क्यों? प्रोग्राम को आकार बदलने और अनुपात को संरक्षित करने के लिए, आपको मूल रूप से window.onresize इवेंट को संभालने की आवश्यकता है, और इस घटना की घटना के दौरान, आपको कई तत्वों के आकार और अनुपात (सबसे अधिक बार ...) को समायोजित करने की आवश्यकता है। इस तरह से आकार बदलने का नुकसान गैर-चिकनी है (छोटे असंगत, आंख से दिखाई देता है, कदम) तत्व का आकार, जिसने इसे इस तरह डिबग करने की कोशिश की - मुझे समझ जाएगा। जब आप अपनी आत्मा को विकास में लगाते हैं और काम करने के लिए पूरे इंटरफ़ेस को लाने की कोशिश करते हैं, तो यह आपकी आँखों को बहुत तनाव देता है।

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

 .scrollar, .scrollar-viewport, .scrollar-systemscrolls, .scrollar-contentwrap, .scrollar-content { bottom: 0px; height: auto; left: 0px; position: absolute; right: 0px; top: 0px; width: auto; } /*     */ .scrollar { overflow: visible; position: relative; } /*          */ .scrollar-contentwrap, .scrollar-content { bottom: auto; right: auto; } 

ऐसी शैलियों की घोषणा के बाद, ब्राउज़र स्वयं स्क्रॉल क्षेत्र और आंतरिक तत्वों दोनों का आकार बदल देगा। लेख में नीचे, वांछित और सर्वोत्तम परिणाम प्राप्त करने के लिए कुछ तत्वों की शैलियों को पूरक और समायोजित किया जाएगा।

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

 .scrollar-systemscrolls { overflow: scroll; } 

सिस्टम स्क्रॉलबार और 22px छिपाएँ

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

 .scrollar-viewport { overflow: scroll; } .scrollar-viewport { clip: rect(0, auto, auto, 0); clip: rect(0 100% 100% 0); } 

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

 .scrollar-systemscrolls { bottom: -22px; right: -22px; } 

उसके बाद, स्क्रॉलबार छिपाया जाएगा और उस क्षेत्र की सीमाओं से परे स्थित होगा जो क्लिप का उपयोग करके क्रॉप किया गया है।

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

Contentwrap ब्लॉक

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

 … var viewport = $(".scrollar-viewport", scrollar); var systemscrolls = $(".scrollar-systemscrolls", scrollar); var correct_h = systemscrolls[0].clientHeight - viewport.height(); //    var correct_w = systemscrolls[0].clientWidth - viewport.width(); //    … 

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

Vscroll और hscroll ब्लॉक

vscroll और hscroll स्क्रॉलबार हैं। फिलहाल, मुख्य कार्य उन्हें किनारों पर "छड़ी" करना और उन्हें ब्राउज़र के माध्यम से उनके आकार और उनके बच्चों के स्थान को बदलना है:

 .scrollar-scroll, .scrollar-track, .scrollar-btn, .scrollar-thumb, .scrollar-corner { position: absolute; } .scrollar-hscroll { bottom: 0px; height: 0px; left: 0px; right: 0px; } .scrollar-vscroll { bottom: 0px; right: 0px; top: 0px; width: 0px; } .scrollar-btnup { left: 0px; top: 0px; } .scrollar-btndown { bottom: 0px; left: 0px; } .scrollar-btnleft { left: 0px; top: 0px; } .scrollar-btnright { right: 0px; top: 0px; } .scrollar-vthumb { max-height: 100%; height: 30px; left: 0px; right: 0px; } .scrollar-hthumb { max-width: 100%; width: 30px; bottom: 0px; top: 0px; } 

इस सूची में कुछ भी जटिल नहीं है और मैं अधिक दिलचस्प भाग में आगे बढ़ूंगा: स्लाइडर्स।

धावकों

धावकों की कार्यक्षमता के सफल कार्यान्वयन के लिए, निम्नलिखित कार्यों पर विचार किया जाना चाहिए:

• उपरोक्त तरीकों से सामग्री को स्क्रॉल करते समय स्लाइडर की स्थिति को बदलना
• माउस के साथ स्लाइडर को घसीटना और इन क्रियाओं के लिए सामग्री की प्रतिक्रिया
• घटक के आयामों के सापेक्ष सामग्री का आकार परिवर्तन करते समय या घटक का आकार बदलते समय स्लाइडर की स्थिति को बनाए रखना और बनाए रखना (यह कार्य संपूर्ण घटक के मापदंडों को अद्यतन करके हल किया गया है और समाधान नीचे वर्णित किया जाएगा)

सामग्री स्क्रॉल करते समय स्लाइडर की स्थिति बदलना

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

स्लाइडर्स को खींचें और छोड़ें

स्लाइडर को माउस पॉइंटर के व्यवहार के साथ-साथ सिस्टम में भी प्रतिक्रिया करनी चाहिए। ऐसा करना मुश्किल नहीं है। एल्गोरिथ्म इस प्रकार है:

• धावक पर मूसडाउन इवेंट को पकड़ें
• दस्तावेज़ तत्व में मूसमव और माउसअप घटनाओं को कनेक्ट करें
• Document.mousemove ईवेंट को हैंडल करें, जिससे सामग्री के माध्यम से स्लाइडर और स्क्रॉलिंग की स्थिति बदल जाए
• document.mouseup घटना को पकड़ा - दस्तावेज़ तत्व पर mousemove और mouseup घटनाओं को अक्षम करें

जैसा कि आप देख सकते हैं, एल्गोरिथ्म बहुत सरल है, लेकिन एक चेतावनी है: स्लाइडर्स की स्थिति को बदलना, अधिक सटीक रूप से, इस स्थिति को बदलने के लिए एल्गोरिथ्म। आप स्लाइडर्स की स्थिति को दो तरीकों से बदल सकते हैं:

• Systemcrolls तत्व से स्क्रॉल घटना। यह निम्नानुसार उत्पन्न होता है: जेएस का उपयोग करके सामग्री के माध्यम से स्क्रॉल करने के लिए, आपको सिस्टम क्रॉकरल्स ब्लॉक के स्क्रॉल लाइट और स्क्रॉलटॉप गुणों को बदलने की आवश्यकता है, और इन गुणों को बदलने से इस ब्लॉग पर एक स्क्रॉल घटना होगी। इस प्रकार, ऊपर वर्णित सामग्री को स्क्रॉल करते समय स्लाइडर की स्थिति बदलने के लिए एल्गोरिथ्म काम करेगा।
• स्लाइडर पर मूसडाउन ईवेंट के पकड़े जाने के बाद, आपको सिस्टमक्रोल तत्वों पर स्क्रॉल ईवेंट के प्रसंस्करण को अक्षम करने की आवश्यकता है, और स्क्रिप्‍ट तत्व को स्क्रॉल करते हुए दस्तावेज़ तत्व पर मूसमव इवेंट पर ले जाएं, जबकि स्क्रॉलक्रॉफ्ट और स्क्रॉल ब्लॉक सिस्टम के प्रॉपर्टीज ब्लॉक करके सामग्री को स्क्रॉल करते हुए।

पहली नज़र में, पहली विधि बेहतर लगती है, क्योंकि लागू करने के लिए कम प्रयास की आवश्यकता है। लेकिन इस पद्धति का नुकसान सिस्टमक्रॉलेकस सीरोल घटना (आंकड़ा देखें) के माध्यम से वर्तमान प्रतिक्रिया है, जिसके कारण स्लाइडर माउस सूचक के पीछे उल्लेखनीय रूप से पीछे हटने लगता है जब उत्तरार्द्ध जल्दी चलता है। इस स्थिति में, हर बार स्क्रॉलले को स्थानांतरित करने के लिए फ़ंक्शन को कॉल करते हुए, systemcrolls.scroll की घटना तब होती है जब स्क्रॉललेफ़्ट और स्क्रॉल ब्लॉक की संपत्तियाँ बदल जाती हैं।


दूसरी विधि के साथ, आप एक बेहतर परिणाम प्राप्त कर सकते हैं। Systemcrolls.scroll इवेंट को अलग करने और संलग्न करने पर अतिरिक्त संचालन केवल दो बार होते हैं: दस्तावेज़ तत्व के माउससम और माउसअप (क्रमशः) घटनाओं पर। इस प्रकार, document.mousemove घटना का प्रसंस्करण तेजी से और अधिक इष्टतम है (आंकड़ा देखें)

घटक सेटिंग्स को अद्यतन करना

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

 //   if (options.hscroll) { scroll = env.hscroll; var ss_cw = ss.clientWidth; //   contentwrap cw.style.width = (ct.offsetWidth + env.correct_w) + "px"; while (Math.abs(cw.scrollWidth - ct.offsetWidth) <= 1) { cw.style.width = (ct.offsetWidth + 1000) + "px"; cw.style.width = (ct.offsetWidth + env.correct_w) + "px"; } var ss_sw = ss.scrollWidth; //    var htrack_w = scroll.track.width(); var hthumb_w = htrack_w * ss_cw / ss_sw; if (hthumb_w > htrack_w) { hthumb_w = htrack_w; } else if (hthumb_w < 30) { hthumb_w = 30; } scroll.thumb.outerWidth(hthumb_w); //   x = htrack_w - hthumb_w; scroll.ratio = (ss_sw - ss_cw) / (x < 1 ? 1 : x); if (scroll.ratio < 1) scroll.ratio = 1; //    scroll.min_pos = 0; scroll.max_pos = htrack_w - hthumb_w; //    scroll.thumb.css("left", ss.scrollLeft / scroll.ratio); } 

इस लिस्टिंग से, मैं "सामग्री की चौड़ाई समायोजित करना" कोड के एक टुकड़े पर ध्यान देना चाहता हूं, बाकी स्पष्टीकरण के बिना स्पष्ट है। इस टुकड़े का अर्थ इस प्रकार है:

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

मुझे घटक सेटिंग अपडेट करने की आवश्यकता है?

• प्रारंभ
• ब्राउज़र विंडो का आकार बदलें
• सामग्री का परिवर्तन

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

अनुकूलन

अनुकूलन यह सब क्या है। लक्ष्य था: कोडर के प्रयासों को कम करना और समय की बचत करना। स्क्रॉलबार में तत्वों की संरचना के साथ कई प्रयोगों के बाद, नीचे की संरचना अधिक लचीली है:

  <div class="scrollar-scroll scrollar-vscroll"> <div class="scrollar-btn scrollar-btnup"></div> <div class="scrollar-btn scrollar-btndown"></div> <div class="scrollar-track scrollar-vtrack"> <div class="scrollar-thumb scrollar-vthumb"></div> </div> </div> 

यह लेआउट एक ऊर्ध्वाधर स्क्रॉलबार है (क्षैतिज के लिए सब कुछ समान है)। ऐसी संरचना के लाभ इस प्रकार हैं:

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

वास्तव में, सभी अनुकूलन लेखन शैलियों के लिए नीचे आते हैं। लेख के अंत में, अनुकूलन के उदाहरणों के लिंक दिए जाएंगे, साथ ही इन उदाहरणों के लिए शैली फ़ाइलों के लिंक भी दिए जाएंगे।

और अगर क्षैतिज या ऊर्ध्वाधर स्क्रॉल की आवश्यकता नहीं है?

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

कंटेंट कैसे बदलें?

एक कंटेंट फंक्शन ("एक्शन", कंटेंट) होता है, जहाँ एक्शन एक jQuery कंटेंट मैनेजमेंट फंक्शन (टेक्स्ट, html, एपेंड, प्रीपेंड ...) होता है। आप इस फ़ंक्शन को मापदंडों के बिना भी कॉल कर सकते हैं, फिर यह एक jQuery ऑब्जेक्ट लौटाएगा और आप इसके साथ काम कर सकते हैं, जिस स्थिति में घटक पैरामीटर हर 300 एमएस में अपडेट किया जाएगा। उदाहरण:

• सामग्री ("html", "Abcd") - पाठ के साथ एक पैराग्राफ में सामग्री को पाठ के साथ एक पैराग्राफ में बदल देता है, जबकि घटक के मापदंडों को अपडेट करने के तुरंत बाद फ़ंक्शन पूरा हो जाएगा;
• सामग्री ()। html ("एबीसी") - इसका प्रभाव पिछले उदाहरण के समान होगा, लेकिन सामग्री सेटटेरवल के कारण अपडेट की जाएगी, चरम मामलों में, आप अपडेट () फ़ंक्शन को कॉल करने के लिए बाध्य कर सकते हैं

लेख के लिंक:

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

निष्कर्ष।

क्या कुछ नया आविष्कार करना इसके लायक है? बेशक! प्रत्येक नए विचार में भविष्य को प्रभावित करने का मौका होता है (किसी विशेष मामले में - प्रयोज्य का भविष्य)