कस्टम स्क्रॉलबार मिक्सिन - सीएसएस-ट्रिक्स

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

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

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

@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) ( // For Google Chrome &::-webkit-scrollbar ( width: $size; height: $size; ) &::-webkit-scrollbar-thumb ( background: $foreground-color; ) &::-webkit-scrollbar-track ( background: $background-color; ) // For Internet Explorer & ( scrollbar-face-color: $foreground-color; scrollbar-track-color: $background-color; ) )

उपयोग:

body ( @include scrollbars(10px, pink, red); ) .custom-area ( @include scrollbars(.5em, slategray); )

उदाहरण

कोडपैन पर ह्यूगो जिराउडेल (@HugoGiraudel) द्वारा स्क्रॉलबार स्टाइल के लिए पेन सास मिक्सिन देखें।

आगे बढ़ते हुए

दोनों ब्राउज़रों पर, केवल रंग और आकार की तुलना में कई अधिक विकल्प हैं। हालाँकि, उन्हें अक्सर अनदेखा कर दिया जाता है, इसलिए मुझे नहीं लगता कि यह इन विकल्पों के साथ मिक्सकिन को उखाड़ फेंकने के लायक है। अतिरिक्त विकल्पों के साथ अधिक उन्नत मिश्रण बनाने के लिए स्वतंत्र महसूस करें।

आगे की रीडिंग: