फ़ायरफ़ॉक्स में स्क्रॉलबार को कैसे छिपाएं?

Question

मुझे अभी पता चला है कि Google Chrome में स्क्रॉलबार को कैसे छिपाया जाता है, मैंने इसे इस कोड के साथ किया था:

::-webkit-scrollbar { display: none; }

एकमात्र समस्या यह है कि यह फ़ायरफ़ॉक्स पर काम नहीं करता है। करने के लिए कई तरह से कोशिश की, लेकिन फिर भी यह काम नहीं करता है।

Comments

ऐसा करने के लिए एक अच्छा विचार नहीं लगता है। html, बॉडी पर छिपे हुए css ओवरफ्लो का उपयोग करें और 100% ऊंचाई और चौड़ाई के साथ एक रैपर div का उपयोग करें।

— अभाताल Ab

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

— माइल्स

stackoverflow.com/questions/15394065/firefox-scroll-bar-hidden

— जैकब

एक काम कर समाधान stackoverflow.com/questions/5820304/…

— IvanM

Answer 1

आप scrollbar-widthनियम का उपयोग कर सकते हैं । आप scrollbar-width: none;फ़ायरफ़ॉक्स में स्क्रॉलबार को छिपा सकते हैं और फिर भी स्वतंत्र रूप से स्क्रॉल करने में सक्षम हो सकते हैं।

body {
   scrollbar-width: none;
}

Comments

आपके पास एक टाइपो है, लेकिन यह स्वीकृत समाधान होना चाहिए।

— शिरजग

यह नवीनतम ब्राउज़र पर काम करता है, लेकिन कृपया ध्यान दें कि यह अभी भी एक प्रयोगात्मक विशेषता है । इसके अलावा, ध्यान रखें कि इस संपत्ति का उपयोग उस तत्व के साथ किया जाना चाहिए जो स्क्रॉलबार का उत्पादन कर रहा है। उदाहरण के लिए, यदि आप कोणीय सामग्री का उपयोग कर रहे हैं md-content, तो शरीर स्क्रॉलबार का उत्पादन नहीं करता है, बल्कि md-contentतत्व करता है। इसलिए, body { scrollbar-width: none; }काम नहीं करेगा, लेकिन md-content { scrollbar-width:none; }होगा।

— साजिब आचार्य

धन्यवाद भाई, आपने मुझे बहुत समय बचा लिया !!

— जॉन

Answer 2

क्रोम, फ़ायरफ़ॉक्स और IE पर स्क्रॉल बार छिपाने के लिए आप इसका उपयोग कर सकते हैं:

.hide-scrollbar
{
    overflow: auto;
    -ms-overflow-style: none; /* IE 11 */
    scrollbar-width: none; /* Firefox 64 */
}

Answer 3

मैं स्क्रॉलबार को छिपाने में सक्षम था लेकिन फिर भी इस घोल के साथ माउस व्हील को स्क्रॉल करने में सक्षम था:

html {overflow: -moz-scrollbars-none;}

प्लगइन डाउनलोड करें https://github.com/brandonaaron/jquery-mousewheel और इस फ़ंक्शन को शामिल करें:

jQuery('html,body').bind('mousewheel', function(event) {
    event.preventDefault();
    var scrollTop = this.scrollTop;
    this.scrollTop = (scrollTop + ((event.deltaY * event.deltaFactor) * -1));
    //console.log(event.deltaY, event.deltaFactor, event.originalEvent.deltaMode, event.originalEvent.wheelDelta);
  });

Comments

यह "अतिप्रवाह: छिपा हुआ;" और स्क्रॉल की अनुमति नहीं देता :-(

— बॉब

मेरे लिए काम करता है - फ़ायरफ़ॉक्स में छिपा हुआ क्षैतिज स्क्रॉलबार। धन्यवाद!

— लीरान एच

फ़ायरफ़ॉक्स 63 के रूप में, यह केवल तभी काम करता है जब आप फ़ायरफ़ॉक्स की फीचर सेटिंग्स में सेट layout.css.overflow.moz-scrollbars.enabledकरते trueहैं, जिससे यह उत्पादन उपयोग के लिए अनुपयुक्त हो जाता है। developer.mozilla.org/en-US/docs/Web/CSS/overflow#Deprecated

— Josh

हालांकि मेरे लिए स्क्रॉलबार-चौड़ाई डालने की चाल नहीं चली: कोई नहीं; html के अंदर किया।

— स्लोडेवलप्टर

Answer 4

फ़ायरफ़ॉक्स, क्रोम और एज में स्क्रॉल को संरक्षित करते समय स्क्रॉल स्क्रॉल को अक्षम करने के लिए मुझे यही चाहिए:

          @-moz-document url-prefix() { /* Disable scrollbar Firefox */
            html{
              scrollbar-width: none;
            }
          }
          body {
            margin: 0; /* remove default margin */
            scrollbar-width: none; /* Also needed to disable scrollbar Firefox */
            -ms-overflow-style: none;  /* Disable scrollbar IE 10+ */
            overflow-y: scroll;
          }
          body::-webkit-scrollbar {
            width: 0px;
            background: transparent; /* Disable scrollbar Chrome/Safari/Webkit */
          }

Answer 5

वेबकिट के लिए निम्नलिखित प्रयोग करें:

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}

मोज़िला फ़ायरफ़ॉक्स के लिए निम्नलिखित कोड का उपयोग करें:

@-moz-document url-prefix() {
    html,body{overflow: hidden !important;}
}

और यदि स्क्रॉलिंग काम नहीं करती है तो जोड़ें

element {overflow-y: scroll;}

विशिष्ट तत्व के लिए

Answer 6

यह कुछ सामान्य समाधान है:

<div class="outer">
 <div class="inner">
    Some content...
 </div>
</div>

<style>
 .outer {
 overflow: hidden;
}
 .inner {
 margin-right: -16px;
 overflow-y: scroll;
 overflow-x: hidden;
}
</style>

स्क्रॉल पट्टी को पैरेंट डिव ने छिपाया है।

इसके लिए आपको अतिप्रवाह का उपयोग करना होगा: मूल अभिभावक में छिपा हुआ।

Comments

काम करता है, लेकिन 16px के रूप में विश्वसनीय नहीं है, बस स्क्रॉलबार की एक अनुमानित चौड़ाई है।

— igorpavlov

जब आप कॉपी करते हैं तो असली लेखक @chowey को क्रेडिट दें। stackoverflow.com/questions/15394065/…

— Rexhin

यह FF 56 पर काम नहीं करता है जब आंतरिक div सामग्री स्क्रीन की चौड़ाई से अधिक लंबी होती है

— श्री जेडी

यह फिक्स एफएफ के लिए समस्या को हल कर रहा है लेकिन अन्य ब्राउज़रों में खराब दुष्प्रभाव हैं (पाठ को काटते हुए)

— कोसमोनाफ्ट

मैं आसानी से अपने आप को उन सभी डी वी में उपयोग करके देख सकता हूं जिनके लिए मेरे ऐप पर स्क्रॉल करने की आवश्यकता होती है ...

— फिलिप

Answer 7

फ़ायरफ़ॉक्स के अधिक हालिया संस्करण के लिए पुराने समाधान अब काम नहीं करते हैं, लेकिन मैंने सफलतापूर्वक v66.0.3 में उपयोग किया था scrollbar-colorजो संपत्ति आप सेट कर सकते हैं transparent transparentऔर जो डेस्कटॉप पर फ़ायरफ़ॉक्स में स्क्रॉलबार को कम से कम अदृश्य बना देगा (अभी भी जगह लेता है) व्यूपोर्ट और मोबाइल पर काम नहीं करता है, लेकिन स्क्रॉलबार एक ठीक रेखा है जिसे दाईं ओर सामग्री पर रखा गया है)।

overflow-y: auto; //or hidden if you don't want horizontal scrolling
overflow-y: auto;
scrollbar-color: transparent transparent;

Comments

आप इसे FF70 + में कैसे करते हैं? scrollbar-width: none;अब और काम नहीं करता। मुझे स्क्रॉलबार को छिपाने की आवश्यकता है, इसे पारदर्शी बनाने की नहीं।

— जीन b।

Answer 8

मैंने इसका इस्तेमाल किया और यह काम कर गया। https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width

html {
scrollbar-width: none;
}

नोट: उपयोगकर्ता एजेंटों को रूटपोर्ट पर किसी भी स्क्रॉलबार-चौड़ाई मान को व्यूपोर्ट पर लागू करना चाहिए।

Answer 9

::-webkit-scrollbar {
  display: none;
}

यह फ़ायरफ़ॉक्स में काम नहीं करेगा, क्योंकि फ़ायरफ़ॉक्स ने कार्यक्षमता के साथ छिपे स्क्रॉलबार का समर्थन छोड़ दिया (आप overflow: -moz-scrollbars-none;पुराने संस्करणों में उपयोग कर सकते हैं )।

Answer 10

बस के मामले में, अगर कोई हैक करने के लिए किसी तरह से स्क्रॉलबार को फ़ायरफ़ॉक्स (79.0) में अदृश्य करने के लिए देख रहा है।

यहां एक समाधान है जो क्रोम, IE, सफारी के लिए सफलतापूर्वक काम करता है, और स्क्रॉलबार को फ़ायरफ़ॉक्स में पारदर्शी बनाता है। उपरोक्त में से कोई भी फ़ायरफ़ॉक्स (79.0) के लिए वास्तव में स्क्रॉलबार को छिपाने में काम नहीं करता है।

कृपया अगर किसी को रंग बदले बिना इसे करने का तरीका मिल जाए तो यह बहुत मददगार होगा। Pls नीचे टिप्पणी करें।

.scrollhost::-webkit-scrollbar {
  display: none;
}

.scrollhost ::-moz-scrollbar {
  display: none;
 
}
 
.scrollhost {
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-color: transparent transparent; /*just hides the scrollbar for firefox */
}

Answer 11

इसका उपयोग करके देखें:

overflow-y: -moz-hidden-unscrollable;

Comments

यह छुपाता है, scrollbarलेकिन स्क्रॉल कार्रवाई बंद कर देता है। क्या बीच का अंतर है overflow-y: -moz-hidden-unscrollable;और overflow: hidden। वास्तव में कुछ भी नहीं तो यह सही उत्तर नहीं है। लेकिन मैं आपको एक वोट देता हूं। धन्यवाद।

— AmerllicA

अंतर यह है कि पहले वाला इसे केवल फ़ायरफ़ॉक्स में छिपाता है

— सहकर्मी

मैंने आपको वोट दिया लेकिन यह मेरे लिए बहुत अजीब है कि आप क्यों हैं -2? आपका उत्तर सही है

— AmerllicA

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

— फिलिप

Answer 12

कुछ विशेष मामलों में (तत्व स्क्रीन के बहुत दाईं ओर है, या इसके अभिभावक अतिप्रवाह छिपा हुआ है) यह एक समाधान हो सकता है:

@-moz-document url-prefix() {
  .element {
    margin-right: -15px;
  }
}

Answer 13

मैंने सब कुछ करने की कोशिश की और मेरे समाधान के लिए सबसे अच्छा काम किया हमेशा ऊर्ध्वाधर स्क्रॉलबार शो, और फिर इसे छिपाने के लिए कुछ नकारात्मक मार्जिन जोड़ें।

इसने IE11, FF60.9 और Chrome 80 के लिए काम किया

body {
  -ms-overflow-style: none; /** IE11 */
  overflow-y: scroll;
  overflow-x: hidden;
  margin-right: -20px;
}

Answer 14

मैं इसे मेरे लिए इसे create-react-appडालकर ReactJS में काम कर रहा हूँ App.css:

@-moz-document url-prefix() {
  html,
  body {
    scrollbar-width: none;
  }
}

इसके अलावा, bodyतत्व हैoverflow: auto