स्क्रॉलबार-चौड़ाई - सीएसएस-ट्रिक्स

Anonim

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

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

एक उदाहरण के लिए, एक टेक्स्ट एडिटिंग इंटरफ़ेस की कल्पना करें, जहाँ एक छोटे, संकीर्ण कंटेनर में फिट होने की आवश्यकता हो। ऐसी स्थिति में, स्क्रॉलबार उपलब्ध स्थान का अधिक हिस्सा ले सकता है:

साथ से scrollbar-width: auto;

साथ scrollbar-widthमें, हम करने के लिए चौड़ाई सेट कर सकते हैं thinकुछ स्थान बचाने के लिए:

.scrollable-element ( scrollbar-width: thin; )
textarea साथ से scrollbar-width: thin;

या, हम noneइसे पूरी तरह से हटाने के लिए चौड़ाई सेट कर सकते हैं , और भी अधिक स्थान बचा सकते हैं (यह मानते हुए कि हम स्क्रॉलबार गायब होने के साथ ठीक हैं):

.scrollable-element ( scrollbar-width: none; )
textareaसाथ scrollbar-width: none;- और आप अभी भी स्क्रॉल कर सकते हैं!

वाक्य - विन्यास

scrollbar-width: auto | thin | none | ;

मूल्यों

scrollbar-width निम्नलिखित मूल्यों को स्वीकार करता है:

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

उदाहरण

ब्राउज़र का समर्थन

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

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम फ़ायर्फ़ॉक्स अर्थात एज सफारी
91 * 87 1 1 88 * टीपी *

मोबाइल / टेबलेट

Android क्रोम Android फ़ायरफ़ॉक्स एंड्रॉयड iOS सफारी
88 * नहीं न 81 * 14.0-14.4 *

सम्बंधित

  • scrollbar-gutter
  • scrollbar-color
  • scrollbar

साधन

  • CSSWG स्क्रॉलबार मॉड्यूल ड्राफ्ट
  • स्क्रॉलबार संशोधन के लिए उपयोग-मामलों का W3C संग्रह
  • सीएसएस का भविष्य: dev.to पर स्क्रॉलबार
  • स्क्रॉल पट्टी चौड़ाई नियंत्रण पर w3c Github चर्चा