2013-03-13 11 views
5

ओवरफ्लो होने पर फ़ायरफ़ॉक्स स्क्रॉल बार को कैसे छिपा सकता हूं: ऑटो?फ़ायरफ़ॉक्स स्क्रॉल बार छुपा

:: - वेबकिट-स्क्रॉलबार { डिस्प्ले: कोई नहीं; }

मैं इस कोड का उपयोग करता हूं लेकिन यह केवल Google क्रोम पर काम करता है।

कोई मददगार लोग? धन्यवाद!

जब मैं इस्तेमाल किया

अतिप्रवाह अपडेट किया गया: छिपा हुआ;

मेरा पृष्ठ पाद लेख पर नहीं जा सकता है।

<html> 
<head> 
<link rel="stylesheet" href="css/style.css" type="text/css" /> 
</head> 

<body> 

<div id="pageWrapper"> 
    <header></header><!--end of header--> 

    <nav> 
     <ul> 
      <li><a href="#">Home</a></li>| 
      <li><a href="#">Services</a></li>| 
      <li><a href="#">Gallery</a></li>| 
      <li><a href="#">FAQ</a></li>| 
      <li><a href="#">About Us</a></li>| 
     </ul> 
    </nav><!--end of nav--> 

    <aside> 

    </aside><!--end of aside--> 

    <section> 
    </section><!--end of section--> 
    <footer>All Right Reserved 2013.</footer><!--end of footer--> 
</div><!--end of pageWrapper--> 

</body> 
</html> 

मेरी सीएसएस

/*----- Reset ----*/ 
html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, 
blockquote, pre, a, address, code, img, small, strong, 
dl, dt, dd, ol, ul, li, fieldset, form, label{ 
margin:0; 
padding:0; 
border:0; 
outline:0; 
font-size:100%; 
vertical-align:baseline; 
background:transparent; 
} 
body{ 
line-height:1.5; 
font-family: helvetica, arial, sans-serif; 
} 

body,html{ 
    height:100%; 
    background-color:whitemsoke; 
} 

ol, ul{ 
list-style:none; 
} 

/* ---- END OF RESET --- */ 
#pageWrapper{ 
    width:965px; 
    height:100%; 
    margin:auto; 
    box-shadow:1px 1px 17px black; 
    overflow:hidden; 
} 
::-webkit-scrollbar { 
    display:none; 
} 
header{ 
    background-color: #D4E7ED; 
    height:200px; 
} 
nav{ 
    text-align:center; 
    background-color:#003366; 
    padding:10px; 
} 
nav ul li{ 
    display:inline; 
    padding:20px; 
} 
nav ul li a{ 
    text-decoration:none; 
    color:whitesmoke; 
} 
nav ul li a:hover{ 
    text-decoration:underline; 
} 
aside{ 
    width:200px; 
    background-color:#666666; 
    height:100%; 
    overflow:hidden; 
    float:left; 
    margin:0 auto -20px 0; 
} 
section{ 
    background-color:#CCCCCC; 
    height:100%; 
    margin:0 auto -20px 0; 
    overflow:hidden; 
} 
footer{ 
    background-color:#003366; 
    height:20px; 
    position:relative; 
} 
+2

आप 'ओवरफ़्लो: छुपा' का उपयोग क्यों नहीं करते? –

+0

मैं उस सर की कोशिश करूंगा, धन्यवाद। लेकिन अतिप्रवाह का उपयोग करते समय फ़ायरफ़ॉक्स में स्क्रॉल बार छुपाने का कोई तरीका नहीं है: ऑटो? –

+0

यह काम नहीं कर रहा है मैं अपना पाद लेख नहीं देख सकता: | –

उत्तर

10

मैं कुछ भी फ़ायरफ़ॉक्स के लिए विशिष्ट नहीं मिला। मैं ::-webkit-scrollbar { display:none } के समतुल्य की तलाश भी कर रहा हूं।

<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> 

स्क्रॉल पट्टी माता पिता div द्वारा छिपा है:

मुझे क्या मिला, फिर भी, एक सामान्य पार ब्राउज़र समाधान है।

यह आपको पैरेंट div में overflow:hidden का उपयोग करने की आवश्यकता है, लेकिन अन्यथा एक आकर्षण की तरह काम करता है।

+0

मार्जिन-दाएं: -16 पीएक्स बहुत चालाक है! – duhaime

+0

यदि आप इस विकल्प को चुनते हैं तो स्क्रॉलबार के प्रत्येक ब्राउज़र पर अलग-अलग आकार होते हैं, टच स्क्रीन उपकरणों के साथ विशेष ध्यान दें। – Grirg

+0

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

संबंधित मुद्दे