दो ब्राउज़र किसी तरह स्क्रॉलबार में प्रवेश करते हैं ...

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

स्क्रोलजैकिंग तंत्र के कार्यान्वयन के दौरान स्क्रॉलबार के सरल और समझने योग्य तर्क को बदला जा सकता है। यह तब होता है जब स्क्रॉलबार का मानक व्यवहार बदल जाता है, जो दस्तावेज़ की लंबाई और स्क्रॉलबार की ऊंचाई के बीच उपयोगकर्ता के पत्राचार द्वारा अपेक्षित उल्लंघन करता है।

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

क्लासिक डेस्कटॉप ऑपरेटिंग सिस्टम ने इस मोबाइल प्रवृत्ति को अपनाया है, जो एप्लिकेशन डिजाइन में पारंपरिक स्क्रॉलबारों के हस्तक्षेप को कम करने की कोशिश कर रहा है।

सामग्री, जिसका अनुवाद आज हम प्रकाशित करते हैं, वेब अनुप्रयोगों में स्क्रॉलबार के उपयोग की कुछ विशेषताओं के लिए समर्पित है।

कुछ शब्दावली

इससे पहले कि हम जारी रखें - चलिए कुछ ऐसे शब्दों को परिभाषित करते हैं जिनका हम यहां उपयोग करेंगे। अर्थात्, हम दो प्रकार के स्क्रॉलबार को अलग करते हैं:

• फिक्स्ड (आज्ञाकारी) स्क्रॉलबार - वे जो स्क्रीन स्पेस पर कब्जा कर लेते हैं। वे आपके द्वारा देखी जा रही सामग्री को ओवरलैप नहीं करते हैं, बल्कि उनके बगल में बैठते हैं।
• गैर-फिक्स्ड (विनीत) स्क्रॉलबर्स - वे जो सामग्री को ओवरलैप करते हैं। वे उन कंटेनरों में स्क्रीन स्पेस को दूर नहीं करते हैं जो कंटेनर में हैं जो वे हैं।

आधुनिक स्क्रॉलबार का मानक व्यवहार

डिफ़ॉल्ट रूप से, iOS और Android स्क्रॉलबार दोनों अनफ़िक्स हैं।

MacOS में (विशेष रूप से, हम इस सामग्री को लिखने के समय प्रासंगिक macOS Mojave के बारे में बात कर रहे हैं) स्क्रॉलबार तब तक छिपे रहते हैं जब तक कि तत्व स्क्रॉल करना शुरू नहीं करता है। यह उस स्थिति में सिस्टम का मानक व्यवहार है जब एक माउस कंप्यूटर से जुड़ा नहीं है। स्क्रॉलबार प्रदर्शित करने के लिए तीन विकल्प हैं ( General > System Preferences सेटिंग General > System Preferences में पाई जा सकती हैं)।


MacOS Mojave में स्क्रॉलबार सेटिंग्स

यह पता चला कि ये सेटिंग क्रोमियम, फ़ायरफ़ॉक्स, और क्रोमियम पर आधारित नए एज में स्क्रॉलबार के व्यवहार को नियंत्रित करती हैं।

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


MacOS में फिक्स्ड स्क्रॉलबार हमेशा दिखाई देता है और कुछ स्क्रीन स्पेस लेता है


दस्तावेज़ के माध्यम से स्क्रॉल करते समय MacOS गैर-स्थिर स्क्रॉलबार सामग्री को ओवरले करता है


दस्तावेज़ में स्क्रॉल नहीं किए जाने पर MacOS में अनफ़िक्स्ड स्क्रॉलबार उस समय छिपा होता है

विंडोज 10 में, Settings > Display > Simplify and personalize Windows , आप समान सेटिंग्स पा सकते हैं।


विंडोज 10 में स्क्रॉलबार सेटिंग्स

दुर्भाग्य से, यहां तक ​​कि जब Automatically hide scroll bars in Windows , तो यह फ़ायरफ़ॉक्स, क्रोम, इंटरनेट एक्सप्लोरर और एज को प्रभावित नहीं करता है। एज के मामले में, हम क्रोमियम पर आधारित दोनों ब्राउज़र संस्करण और एजएचटीएमएल पर आधारित संस्करण के बारे में बात कर रहे हैं।

कार्य अवलोकन

यहाँ वह पृष्ठ है जिसे हमने macOS पर ऊपर समीक्षा की थी वह विंडोज पर दिखता है।


विंडोज स्क्रॉलबार पेज

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

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

परियोजना की आवश्यकताएं

हम एक वेब एप्लिकेशन विकसित करना चाहते हैं, जिसमें उपयोग किए गए स्क्रॉलबार निम्नलिखित विशेषताओं में भिन्न हैं:

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

मैं सीएसएस के साथ कितनी दूर जा सकता हूं?

यहाँ कंटेनर तत्व के लिए कोड है, जिसमें overflowing-element वर्ग को सौंपा गया है, और स्टाइल के लिए CSS कोड भी:

 <div class="overflowing-element"></div> .overflowing-element {  overflow-y: auto;  -webkit-overflow-scrolling: touch;  -ms-overflow-style: -ms-autohiding-scrollbar; } 

यदि आपको Internet Explorer में और EdgeHTML पर आधारित एज में अनफिल्टर्ड स्क्रॉलबार की आवश्यकता है, तो इसका मतलब है कि -ms-overflow-style: -ms-autohiding-scrollbar; । इसके उपयोग के साथ, सब कुछ काम करेगा जैसा कि इसे (यह काफी सरल है - सही?)।

जब iOS 13 बाहर आया, तो यह पता चला कि -webkit-overflow-स्क्रॉलिंग: स्क्रॉलिंग के भौतिकी में सुधार के लिए स्पर्श संपत्ति की आवश्यकता नहीं हो सकती है। यद्यपि, यदि आपको iOS के पुराने संस्करणों का समर्थन करने की आवश्यकता है, तो इस संपत्ति का उपयोग करने से इंकार करना बेहतर है।

यदि हम स्क्रॉलिंग से संबंधित सीएसएस गुणों के बारे में बात करते हैं, तो ओवरस्क्रॉल-व्यवहार संपत्ति के बारे में पढ़ना उपयोगी हो सकता है। यह आपको स्क्रॉलिंग का समर्थन करने वाले तत्व की सीमा तक पहुंचने पर सिस्टम के व्यवहार को नियंत्रित करने की अनुमति देता है।

▍Firefox

फ़ायरफ़ॉक्स ब्राउज़र उपसर्गों के बिना CSS गुणों का समर्थन करता है। यह स्क्रॉलबार-रंग और स्क्रॉलबार-चौड़ाई है ।

निम्न उदाहरण CSS चर का उपयोग करता है जो स्पष्टता के लिए Internet Explorer 11 में समर्थित नहीं हैं:

 :root {  --scrollbar-track-color: transparent;  --scrollbar-color: rgba(0,0,0,.2);  --scrollbar-width: thin; /* or `auto` or `none` */ } .overflowing-element {  scrollbar-width: var(--scrollbar-width);  scrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color); } 

Edgeक्रोम और सफारी, क्रोमियम-आधारित एज ब्राउज़र, और अन्य ब्राउज़र

वेबकिट और ब्लिंक-आधारित ब्राउज़र स्क्रॉलबार को कस्टमाइज़ करने के लिए डिज़ाइन किए गए कस्टम छद्म तत्वों का समर्थन करते हैं:

 :root {  --scrollbar-track-color: transparent;  --scrollbar-color: rgba(0,0,0,.2);  --scrollbar-size: .375rem;  --scrollbar-minlength: 1.5rem; /*     ( ,  ) */ } .overflowing-element::-webkit-scrollbar {  height: var(--scrollbar-size);  width: var(--scrollbar-size); } .overflowing-element::-webkit-scrollbar-track {  background-color: var(--scrollbar-track-color); } .overflowing-element::-webkit-scrollbar-thumb {  background-color: var(--scrollbar-color);  /*   -  :hover :active */ } .overflowing-element::-webkit-scrollbar-thumb:vertical {  min-height: var(--scrollbar-minlength); } .overflowing-element::-webkit-scrollbar-thumb:horizontal {  min-width: var(--scrollbar-minlength); } 

यहां CodePen पर एक उदाहरण है, स्क्रॉलबार को अनुकूलित करने की क्षमता का प्रदर्शन, विशेष रूप से CSS द्वारा प्रदर्शन किया गया। और यहां एक उदाहरण है जो स्क्रॉलबार के मानक व्यवहार को दर्शाता है। आप उनकी तुलना कर सकते हैं।

यह ध्यान दिया जाना चाहिए कि उपरोक्त कोड में एक समस्या है। यह इस तथ्य में शामिल है कि छद्म तत्व की height या width गुणों को सेट करते समय ::-webkit-scrollbar को मैकओएस में, गैर-फिक्स्ड ::-webkit-scrollbar को एक निश्चित (मानक सेटिंग्स को फिर से परिभाषित) के साथ बदल दिया जाता है। हालांकि, जावास्क्रिप्ट कोड के एक छोटे टुकड़े के साथ इसे ठीक करना मुश्किल नहीं है।

सीएसएस और जेएस का एक सा

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

 /* *   . *   body   `layout-scrollbar-obtrusive` *   ,     . */ var parent = document.createElement("div"); parent.setAttribute("style", "width:30px;height:30px;"); parent.classList.add('scrollbar-test'); var child = document.createElement("div"); child.setAttribute("style", "width:100%;height:40px"); parent.appendChild(child); document.body.appendChild(parent); //   .    //   30px,    . var scrollbarWidth = 30 - parent.firstChild.clientWidth; if(scrollbarWidth) {  document.body.classList.add("layout-scrollbar-obtrusive"); } document.body.removeChild(parent); 

यदि स्क्रॉलबार तय हो गया है, तो हम layout-scrollbar-obtrusive क्लास को body डॉक्यूमेंट एलिमेंट में जोड़ते हैं। इस वर्ग का उपयोग केवल तय स्क्रॉलबार की width और height गुणों को समायोजित करने के लिए किया जा सकता है। यह स्क्रॉलबार के व्यवहार में उपर्युक्त हस्तक्षेप से बचा जाता है। इस हस्तक्षेप के दौरान, स्क्रॉलबार बदल जाता है और परियोजना उपयोगकर्ता द्वारा बनाई गई सिस्टम सेटिंग्स से दूर चली जाती है। यहाँ layout-scrollbar-obtrusive लिए शैली है:

 .layout-scrollbar-obtrusive .layout-scrollbar::-webkit-scrollbar {  height: var(--scrollbar-size);  width: var(--scrollbar-size); } 

यहां आप सीएसएस और जावास्क्रिप्ट का एक साथ उपयोग करने वाली तकनीक को लागू करने का एक उदाहरण पा सकते हैं। यहां , तुलना के लिए, एक उदाहरण है जो सिस्टम के मानक व्यवहार को दर्शाता है।

सारांश: समस्या के समाधान की समीक्षा

टच स्क्रीन वाले उपकरणों पर जो अनलॉक्ड स्क्रॉलबार्स (जो कि iOS और एंड्रॉइड डिवाइस पर है) का उपयोग करते हैं, हम बस स्क्रॉलबार के मानक व्यवहार का उपयोग करते हैं।

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

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

यहाँ डेमो प्रोजेक्ट्स हैं, जिनमें से सार को ऊपर वर्णित किया गया था:

• मानक स्क्रॉलबार व्यवहार दिखा रहा है।
• एक समाधान जो केवल CSS का उपयोग करता है। सभी स्क्रॉल पट्टियाँ स्टाइल की गई हैं।
• एक समाधान जो सीएसएस और जावास्क्रिप्ट का उपयोग करता है। केवल फिक्स्ड स्क्रॉलबार स्टाइल किए गए हैं।

प्रिय पाठकों! आप अपनी परियोजनाओं में स्क्रॉलबार की शैली कैसे करते हैं?