फ़ायरफ़ॉक्स के लिए कस्टम सीएसएस स्क्रॉलबार

Question

मैं CSS के साथ एक स्क्रॉलबार को अनुकूलित करना चाहता हूं।

मैं इस WebKit CSS कोड का उपयोग करता हूं, जो Safari और Chrome के लिए अच्छा काम करता है:

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-track-piece  {
    background-color: #C2D2E4;
}

::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: #0A4C95;
}

मैं फ़ायरफ़ॉक्स में एक ही काम कैसे कर सकता हूं?

मुझे पता है कि मैं इसे आसानी से jQuery का उपयोग कर सकता हूं, लेकिन अगर यह संभव है तो मैं इसे शुद्ध सीएसएस के साथ करना पसंद करूंगा।

किसी की विशेषज्ञ सलाह के लिए आभारी होंगे!

Comments

कृपया साझा करें कि आप इसे jQuery का उपयोग करके कैसे कर सकते हैं। मैं उसी समस्या का सामना कर रहा हूं, लेकिन वेबकिट के लिए इसे ठीक करने के लिए सीएसएस का इस्तेमाल किया। हालाँकि, फ़ायरफ़ॉक्स एक समस्या है कि आपके jQuery समाधान के साथ मदद करने में सक्षम हो सकता है।

— इब्बानम

मैं jscrollpane jQuery प्लगइन का उपयोग करने की सलाह देता हूं।

— दिमित्री वोरोंत्ज़ोव

फ़ायरफ़ॉक्स में jScrollPane के साथ एक समस्या है। jScrollPane क्रोम में पूरी तरह से काम करता है, लेकिन फ़ायरफ़ॉक्स में आपके पास jScrollPane स्क्रॉलबार के दाईं ओर एक खाली सिस्टम स्क्रॉलबार है। केवल एक स्क्रॉलबार होना चाहिए

— iGbanam

सच नहीं। अगर आपके पास ऐसा है, तो आपने कुछ गलत किया है।

— दिमित्री वोरोंत्ज़ोव

मेरा जवाब यहाँ देखें: stackoverflow.com/questions/7357203/custom-scrollbars/…

— Buzinas

Answer 1

2018 के अंत में, फ़ायरफ़ॉक्स में अब सीमित अनुकूलन उपलब्ध है!

देखिए ये जवाब:

• https://stackoverflow.com/a/54101063/405015
• https://stackoverflow.com/a/53739309/405015

और इस पृष्ठभूमि की जानकारी के लिए: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109

---

::-webkit-scrollbarदोस्तों और दोस्तों के बराबर कोई फ़ायरफ़ॉक्स नहीं है ।

आपको जावास्क्रिप्ट के साथ रहना होगा।

इस सुविधा को बहुत से लोग पसंद करेंगे, देखें: https://bugzilla.mozilla.org/show_bug.cgi?id=77790

---

जहाँ तक जावास्क्रिप्ट प्रतिस्थापन जाते हैं, आप कोशिश कर सकते हैं:

• https://github.com/noraesae/perfect-scrollbar
• https://github.com/jnicol/trackpad-scroll-emulator
• https://github.com/vitch/jScrollPane (लेकिन यह पुराना है और जाहिर तौर पर PITA ...)

Comments

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

— दिमित्री वोरोंत्ज़ोव

नहीं। दुर्भाग्य से, कोई भी संभव मान -moz-appearanceमदद नहीं कर सकता है। "The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme."- आपको बस एक देशी स्क्रॉलबार मिलेगा।

— तीस

बस किसी को भी यह पढ़ने के लिए एक व्यावहारिक समाधान की जरूरत है, मैं jscrollpane jQuery प्लगइन का उपयोग कर समाप्त हो गया।

— दिमित्री वोरोंत्ज़ोव

@JacquesMathieu, मैं देख रहा हूं कि आपका क्या मतलब है। हालाँकि, यह बैरन की गलती नहीं है, अगर मैं पेज डाउनलोड करता हूँ और बैरन को इनिशियलाइज़ करने से रोकता हूँ, तो बग अभी भी होता है। तो यह यहाँ गलती से क्रोम की तरह लग रहा है।

— thephpdev

draft.csswg.org/css-scrollbars-1 चरण 1 युक्ति की शुरुआत है, लेकिन यह फ़ायरफ़ॉक्स नाइटली में अब डिफ़ॉल्ट रूप से बॉक्स से बाहर सक्षम है।

— वीजी

Answer 2

फ़ायरफ़ॉक्स 64 कल्पना ड्राफ्ट के लिए समर्थन जोड़ता सीएसएस स्क्रॉलबार मॉड्यूल स्तर 1 है, जो कहते हैं दो नए गुणों की scrollbar-widthऔरscrollbar-color जो स्क्रॉलबार प्रदर्शित होने पर कुछ नियंत्रण देते हैं।

आप scrollbar-colorनिम्न में से एक मान (MDN से विवरण) पर सेट कर सकते हैं :

• auto स्क्रॉलबार के ट्रैक भाग के लिए डिफ़ॉल्ट प्लेटफ़ॉर्म रेंडरिंग, किसी भी अन्य संबंधित स्क्रॉलबार रंग गुणों की अनुपस्थिति में।
• dark एक डार्क स्क्रॉलबार दिखाएँ, जो या तो प्लेटफ़ॉर्म द्वारा प्रदान किया गया एक स्क्रॉल संस्करण हो सकता है, या गहरे रंग के साथ एक कस्टम स्क्रॉलबार हो सकता है।
• light एक लाइट स्क्रॉलबार दिखाएँ, जो या तो प्लेटफ़ॉर्म द्वारा प्रदान किया गया स्क्रॉल संस्करण का एक हल्का संस्करण हो सकता है, या हल्के रंगों के साथ एक कस्टम स्क्रॉलबार हो सकता है।
• <color> <color> पहला रंग स्क्रॉलबार अंगूठे पर लागू होता है, दूसरा स्क्रॉलबार ट्रैक पर।

ध्यान दें कि darkऔर lightमूल्यों वर्तमान में फ़ायरफ़ॉक्स में लागू नहीं हैं ।

macOS नोट:

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

दृश्य डेमो:

.scroll {
  width: 20%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-color-auto {
  scrollbar-color: auto;
}
.scroll-color-dark {
  scrollbar-color: dark;
}
.scroll-color-light {
  scrollbar-color: light;
}
.scroll-color-colors {
  scrollbar-color: orange lightyellow;
}

<div class="scroll scroll-color-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div class="scroll scroll-color-dark">
<p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p>
</div>

<div class="scroll scroll-color-light">
<p>light</p><p>light</p><p>light</p><p>light</p><p>light</p><p>light</p>
</div>

<div class="scroll scroll-color-colors">
<p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p>
</div>

आप scrollbar-widthनिम्न में से एक मान (MDN से विवरण) पर सेट कर सकते हैं :

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

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

यह शायद ध्यान देने योग्य है कि लंबाई मूल्य विकल्प और संपूर्ण scrollbar-width भविष्य के मसौदे में हटाने के लिए संपत्ति पर विचार किया जा रहा है, और यदि ऐसा होता है तो भविष्य के संस्करण में फ़ायरफ़ॉक्स से इस विशेष संपत्ति को हटाया जा सकता है।

दृश्य डेमो:

.scroll {
  width: 30%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-width-auto {
  scrollbar-width: auto;
}
.scroll-width-thin {
  scrollbar-width: thin;
}
.scroll-width-none {
  scrollbar-width: none;
}

<div class="scroll scroll-width-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div class="scroll scroll-width-thin">
<p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p>
</div>

<div class="scroll scroll-width-none">
<p>none</p><p>none</p><p>none</p><p>none</p><p>none</p><p>none</p>
</div>

Comments

इस उत्तर के लिए धन्यवाद। मैंने इसे (और अन्य प्रासंगिक उत्तर) को बढ़ावा देने के लिए अपना स्वीकृत उत्तर अपडेट कर दिया है ताकि लोगों को इसे देखने की अधिक संभावना हो।

— १

यह अनिवार्य रूप से तीन सप्ताह पूर्व से लुका के उत्तर की नकल करता है ।

— जोश हबदास

@ जोशदास के उत्तर में लगभग संगतता या उपयोग की जानकारी नहीं है। मैंने यह उत्तर इसलिए बनाया क्योंकि दूसरे उत्तर में वह महत्वपूर्ण जानकारी नहीं थी जिसकी मुझे तलाश थी।

— अलेक्जेंडर ओ'मैरा

आप उन्हें क्रेडिट दे सकते हैं, प्रतिक्रिया दे सकते हैं या उनके जवाब को संपादित करने पर विचार कर सकते हैं।

— जोश हबदास

@ जोशदास खैर, 5 लोग पहले से ही इसे उपयोगी पाते हैं, और इसमें वेब पर कहीं और नहीं मिली जानकारी है, इसलिए मैं इससे सहमत नहीं हूं।

— अलेक्जेंडर ओ'मैरा

Answer 3

क्या मैं एक विकल्प प्रदान कर सकता हूं?

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

.scroll_content {
    position: relative;
    width: 400px;
    height: 414px;
    top: -17px;
    padding: 20px 10px 20px 10px;
    overflow-y: auto;
}

डेमो और थोड़ा और अधिक गहराई से स्पष्टीकरण के लिए, यहां देखें ...

jsfiddle.net/aj7bxtjz/1/

Comments

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

— stvanrynisions

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

— तोमज़

मैं इस समाधान को पूर्ण स्थिति के साथ सभी अतिरिक्त मार्कअप को छोड़कर प्यार करता हूं (चर आकार सामान को एक बुरा सपना बनाता है) इसके अलावा आप वास्तव में शैली को बदल नहीं सकते हैं, आप बस मौजूदा स्कॉलर के तत्वों को छिपा रहे हैं / छिपा रहे हैं - बहुत बुरा है अगर मुझे ग्रीन बार चाहिए!

— रोज़ा

हाँ, चार साल के बाद, यह ओपी के सवाल का जवाब देने के बारे में नहीं है जितना समुदाय में योगदान दे रहा है।

— tmthyjames

समस्या का सार यह है कि कुछ रेंडरिंग इंजन द्वारा प्रदान किए गए समाधान गैर-मानक हैं। यह वह प्रश्न है जो मेरी चिंताओं को सबसे अच्छी तरह से संबोधित करता है और यह वह उत्तर है जिसके लिए मैं स्क्रॉल कर रहा था।

— फिलिप डुपनोविक

Answer 4

मैंने सोचा कि अगर कोई नौकरी करने के लिए JQuery प्लगइन पर विचार कर रहा है तो मैं अपने निष्कर्षों को साझा करूंगा।

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

अब मैं परफेक्ट स्क्रॉलबार दे रहा हूं । यह सरल और हल्का है (6KB) और यह अब तक एक अच्छा काम कर रहा है। यह सीपीयू गहन नहीं है (जहां तक ​​मैं बता सकता हूं) और आपके डोम में बहुत कम जोड़ता है। यह केवल पैरामीटर के एक जोड़े को ट्वीक (व्हीलस्पीड और व्हीलप्रॉपैजेशन) के लिए मिला है, लेकिन मुझे इसकी ज़रूरत है और यह स्क्रॉलिंग सामग्री को अच्छी तरह से अपडेट करता है (जैसे कि लोडिंग इमेज)।

PS मुझे JScrollPane पर एक त्वरित नज़र थी, लेकिन @simone सही है, यह अब थोड़ा दिनांकित है और एक PITA है।

Comments

ट्रैकपैड स्क्रॉल एमुलेटर भी है - यह twitch.tv का उपयोग करता है।

— forivall

परफेक्ट स्क्रॉलबार वास्तव में बहुत अच्छा है। कई अन्य विकल्पों को समाप्त करने के बाद, मैंने इसे सबसे अच्छा समाधान पाया। यह सुझाव देने के लिए धन्यवाद।

— लियोनार्ड टेओ

nanoScroller भी वास्तव में अच्छा है, और अपेक्षाकृत दुबला है। jamesflorentino.github.io/nanoScrollerJS हैवी जेएस प्लगइन्स के विरोध में, यह केवल देशी स्कोरर को छुपाता है, और एक वैकल्पिक स्क्रोलर को मूल 'स्क्रॉल' ईवेंट का उपयोग करके दिखाता है

— डैनी

मैं jquery के सभी समाधानों से बच रहा हूं, क्योंकि वे सभी तनाव की वजह से धीमी मशीनों या मशीनों से बाहर रहते हैं, लेकिन PS एक विजेता की तरह दिखता है

— RozzA

Answer 5

फ़ायरफ़ॉक्स 64 के बाद से , एक साधारण स्क्रॉलबार स्टाइल के लिए नए चश्मे का उपयोग करना संभव है ( विक्रेता उपसर्गों के साथ क्रोम में पूर्ण नहीं है )।

में इस उदाहरण के लिए एक समाधान है कि एक समान (बराबर नहीं) अंतिम परिणाम (उदाहरण के उपयोग आपके मूल Chrome नियम) के साथ पता दोनों फ़ायरफ़ॉक्स और क्रोम के लिए अलग नियम गठबंधन को देखने के लिए संभव है:

प्रमुख नियम हैं:

फ़ायरफ़ॉक्स के लिए

.scroller {
  overflow-y: scroll;
  scrollbar-color: #0A4C95 #C2D2E4;
}

क्रोम के लिए

.scroller::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

.scroller::-webkit-scrollbar-track-piece  {
    background-color: #C2D2E4;
}

.scroller::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: #0A4C95;
}

कृपया ध्यान दें कि आपके समाधान के संबंध में, निम्नलिखित के रूप में भी सरल क्रोम नियमों का उपयोग करना संभव है:

.scroller::-webkit-scrollbar-track  {
    background-color: #C2D2E4;
}

.scroller::-webkit-scrollbar-thumb {
    height: 30px;
    background-color: #0A4C95;
}

अंत में, स्क्रॉलबैरों में तीर को फ़ायरफ़ॉक्स में भी छिपाने के लिए, वर्तमान में इसे निम्नलिखित नियम के साथ " पतली " के रूप में सेट करना आवश्यक हैscrollbar-width: thin;

Comments

IE 5.5 की तरह लग रहा है सब के बाद सही कुछ मिल सकता है। :)

— जोश हबदास

Answer 6

वर्ष 2020 यह काम करता है

/* Thin Scrollbar */
:root{
  scrollbar-color: rgb(210,210,210) rgb(46,54,69) !important;
  scrollbar-width: thin !important;
}

https://github.com/Aris-t2/CustomCSSforFx/issues/160

Comments

अच्छी खबर है, लेकिन हम रूपरेखा कैसे बदल सकते हैं?

— अबीविवेकिंग

Answer 7

यह उपयोगकर्ता-शैली में काम करता है, और ऐसा लगता है कि यह वेब पृष्ठों में काम नहीं करता है। मुझे इस पर मोज़िला से आधिकारिक निर्देश नहीं मिला है। हालांकि यह कुछ बिंदु पर काम कर सकता है, फ़ायरफ़ॉक्स के पास इसके लिए आधिकारिक समर्थन नहीं है। यह बग अभी भी https://bugzilla.mozilla.org/show_bug.cgi?id=77790 खुला है

scrollbar {
/*  clear useragent default style*/
   -moz-appearance: none !important;
}
/* buttons at two ends */
scrollbarbutton {
   -moz-appearance: none !important;
}
/* the sliding part*/
thumb{
   -moz-appearance: none !important;
}
scrollcorner {
   -moz-appearance: none !important;
   resize:both;
}
/* vertical or horizontal */
scrollbar[orient="vertical"] {
    color:silver;
}

विवरण के लिए http://codemug.com/html/custom-scrollbars-using-css/ की जाँच करें।

Comments

जैसा कि आपने लिखा है, मैंने भी कोशिश की, लेकिन इसके एफएफ में मेरे काम नहीं करने पर, jsfiddle.net/gGbkY/1 की जाँच करें क्या मुझे कुछ याद आ रहा है?

— सतिंदर सिंह

यह उपयोगकर्ता-शैली में काम करता है, और ऐसा लगता है कि यह वेब पृष्ठों में काम नहीं करता है। मुझे इस पर मोज़िला से आधिकारिक निर्देश नहीं मिला है।

— ipirlo

कृपया समान लिंक देखें: यह किसी भी अधिक काम नहीं करता है

— क्रुनाल शाह

उपयोगकर्ता-शैली क्या है?

— मारेकी

आपके द्वारा जोड़ा गया बग 17 साल पहले रिपोर्ट किया गया था और अभी भी असाइन नहीं किया गया है। मुझे लगता है कि यह कहना सुरक्षित है कि एफएफ कभी भी देशी स्क्रॉलबारों को छिपाने का समर्थन नहीं करेगा।

— स्टर्लिंग बॉर्न

Answer 8

@-moz-document url-prefix(http://),url-prefix(https://) {
    scrollbar {
       -moz-appearance: none !important;
       background: rgb(0,255,0) !important;
    }
    thumb,scrollbarbutton {
       -moz-appearance: none !important;
       background-color: rgb(0,0,255) !important;
    }

    thumb:hover,scrollbarbutton:hover {
       -moz-appearance: none !important;
       background-color: rgb(255,0,0) !important;
    }
    scrollbarbutton {
       display: none !important;
    }
    scrollbar[orient="vertical"] {
      min-width: 15px !important;
    }
}

Comments

आपने यह बताने के लिए कि यह क्या करता है या यह कैसे करता है, कोई भी जानकारी नहीं के साथ एक कोड बूँद प्रदान की है।

— जोश हबदास