CSS div element - केवल क्षैतिज स्क्रॉल बार कैसे दिखाएं?

Question

मेरे पास एक डिव कंटेनर है और इसकी शैली को इस प्रकार परिभाषित किया है:

div#tbl-container 
{
    width: 600px;   
    overflow: auto;    
    scrollbar-base-color:#ffeaff
}

एक बार जब मैं इस डिव को सम्‍मिलित करता हूं, तो मुझे क्षैतिज और ऊर्ध्वाधर दोनों स्क्रॉल बार अपने आप मिल जाते हैं। मैं केवल क्षैतिज स्क्रॉल पट्टियाँ स्वचालित रूप से प्रकट करना चाहता हूं। मैं प्रोग्राम की तालिका की ऊंचाई को संशोधित करेगा।

मैं यह कैसे करु?

Answer 1

जब तक आप सामग्री को उनकी आवश्यकता के लिए पर्याप्त नहीं बनाते हैं तब तक आपको क्षैतिज और ऊर्ध्वाधर दोनों स्क्रॉल नहीं मिलने चाहिए।

हालाँकि आप आमतौर पर IE में बग के कारण करते हैं। अन्य ब्राउज़रों (फ़ायरफ़ॉक्स आदि) में यह जानने के लिए जांचें कि क्या यह वास्तव में केवल IE है जो यह कर रहा है।

IE6-7 (अन्य ब्राउज़रों के बीच) स्क्रॉलबार को स्वतंत्र रूप से सेट करने के लिए प्रस्तावित CSS3 एक्सटेंशन का समर्थन करता है, जिसका उपयोग आप वर्टीकल स्‍टारबार को दबाने के लिए कर सकते हैं:

overflow: auto;
overflow-y: hidden;

आपको IE8 के लिए भी जोड़ना पड़ सकता है:

-ms-overflow-y: hidden;

जैसा कि Microsoft IE8 मानक मोड में सभी पूर्व-सीआर-मानक गुणों को अपने स्वयं के '-ms' बॉक्स में स्थानांतरित करने की धमकी दे रहा है। (यह समझ में आता है अगर वे हमेशा ऐसा करते थे, लेकिन अब सभी के लिए एक असुविधा है।)

दूसरी ओर यह पूरी तरह से संभव है IE8 वैसे भी बग को ठीक कर देगा।

Comments

हे भगवान, आपने मेरा दिन बचा लिया! हालांकि मैंने यानी 8-युक्ति की कोशिश नहीं की है। इसका ओके अब एफएफ और आईई -7। मुझे यही सब चाहिए। एक बार फिर धन्यवाद !

— सत्य कल्लूरी

Answer 2

मुझे white-space: nowrap;शैली से भी जुड़ना था , अन्यथा तत्व उस क्षेत्र में लिपट जाते जो हम स्क्रॉल करने की क्षमता को हटा रहे हैं।

Comments

white-space: nowrap;कुंजी है, इसके बिना आपके तत्व ढेर / लपेटेंगे।

— रिकार्डो ज़िया

व्हाइट-स्पेस: नॉरैप फ़ायरफ़ॉक्स सफारी या क्रोम पर काम नहीं करता है, यहां तक ​​कि छवियों के साथ भी मुझे div डिस्प्ले के अंदर मिला है: इनलाइन या ब्लॉक के रूप में

Answer 3

यह समाधान पिता div के लिए ऊंचाई / चौड़ाई विनिर्देशन के बिना है, इसलिए यह खिड़की के आकार के लिए उत्तरदायी होगा और सबसे उपयोगी कारण क्षैतिज स्क्रॉलबार यदि आवश्यक हो तो दिखाई देता है।

.container{
    padding:20px;
    border:dotted 1px;
    white-space:nowrap;
    overflow-x:auto;
}

.box{
    width:100px;
    height:180px;
    background-color: red;
    margin:10px;
    display:inline-block
}

DEMO पर एक नज़र डालें

Answer 4

दोनों को दिखाने के लिए:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll; padding-bottom:10px;">      </div>

एक्स एक्सिस छुपाएं:

<div style="height:250px; width:550px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;">      </div>

छिपाएँ वाई अक्ष:

<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;">      </div>

Answer 5

आप इसे भी बना सकते हैं overflow: autoऔर इस तरह से अधिकतम निश्चित ऊँचाई और चौड़ाई दे सकते हैं , जब पाठ या जो कुछ भी वहाँ हो, उसे ओवरफ्लो करके केवल आवश्यक स्क्रॉलबार दिखाया जाएगा

Answer 6

मैं सीएसएस गुणों का उपयोग करता हूं: 1) " overflow-x: auto"; 2) " overflow-y: hidden"; 3) " white-space: nowrap";

कंटेनर और भीतरी DIVS दोनों घटकों के लिए चौड़ाई सेट करना न भूलें। प्रॉपर्टी "व्हाइट-स्पेस: नॉवरैप " आंतरिक डीआईवाईएस को एक अलग लाइन पर नहीं गिरने देती है।

निम्नलिखित HTML को ध्यान में रखते हुए:

<div class="container"> 
  <div class="inner-1"></div>
  <div class="inner-2"></div>
  <div class="inner-3"></div>
</div>

मैं निम्नलिखित सीएसएस का उपयोग केवल क्षैतिज स्क्रॉल करने के लिए करता हूं:

.container {
  height: 80px;
  width: 600px;
  overflow-x: auto;
  overflow-y: hidden; 
  white-space: nowrap;
}
.inner-1,.inner-2,.inner-3 {
  height: 60px;
  max-width: 250px;
 display: inline-block; /* this should fix it */
}

फिडल: https://jsfiddle.net/qrjh93x8/ (उपरोक्त कोड के साथ काम नहीं करना)

Comments

मैंने श्वेत-स्थान जोड़ा, लेकिन मेरा काम नहीं हो रहा है: jsfiddle.net/jjq4xgz5/1 । धन्यवाद।

— Si8

Answer 7

निम्न का उपयोग करें

<div style="max-width:980px; overflow-x: scroll; white-space: nowrap;">
<table border="1" style="cellpadding:0; cellspacing:0; border:0; width=:100%;" >

Answer 8

.box-author-txt {width:596px; float:left; padding:5px 0px 10px 10px;  border:1px #dddddd solid; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; overflow-x: scroll; white-space: nowrap; overflow-y: hidden;}


.box-author-txt ul{ vertical-align:top; height:auto; display: inline-block; white-space: nowrap; margin:0 9px 0 0; padding:0px;}
.box-author-txt ul li{ list-style-type:none;  width:140px; }

Comments

कृपया अपना उत्तर बताएं।

— hes056

Answer 9

CSS3 के पास overflow-xसंपत्ति है, लेकिन मैं उसके लिए बहुत समर्थन की उम्मीद नहीं करूंगा। में सीएसएस 2 सब आप कर सकते हैं एक सामान्य सेट कर दिया जाता scrollनीति और अपने काम widthsऔर heightsउन्हें गंदगी के लिए नहीं।

Answer 10

हमें overflow: autoएक स्क्रॉलबार को सेट करना और छिपाना चाहिए जिसे हम असमर्थित CSS3 ब्राउज़र पर काम करने के लिए उपयोग नहीं करते हैं। इस सीएसएस ओवरफ्लो को देखें; XME.im