मैं एक div में क्षैतिज स्क्रॉलबार कैसे निकालूं?

Question

जब मैं सेट करता हूं overflow: scroll, तो मुझे क्षैतिज और ऊर्ध्वाधर स्क्रॉलबर्स मिलते हैं।

क्या एक div में क्षैतिज स्क्रॉलबार को हटाने का एक तरीका है?

Answer 1

overflow-x: hidden;

Comments

धन्यवाद आपने बहुत समय बचाया। क्या कोई इसे स्वीकार किए गए उत्तर plz के रूप में चिह्नित कर सकता है।

— नागराजन SR

यह एक बुरा समाधान है। क्योंकि इस मामले में आप कंटेनर में क्षैतिज स्क्रॉल छिपाते हैं। लेकिन अगर यह कंटेनर बहुत चौड़ा है तो आपकी सामग्री आपके कंटेनर में फिट नहीं होगी।

— एलेक्स फिलाटोव

Answer 2

लिखना न भूलें overflow-x: hidden;

कोड होना चाहिए:

overflow-y: scroll;
overflow-x: hidden;

Answer 3

इसके साथ overflow-y: scroll, वर्टिकल स्क्रॉलबार हमेशा रहेगा भले ही इसकी आवश्यकता न हो। यदि आप चाहते हैं कि y- स्क्रॉलबार केवल तभी दिखाई दे जब यह आवश्यक हो, तो मुझे यह काम मिला:

.mydivclass {overflow-x: hidden; overflow-y: auto;}

Answer 4

सीएसएस

overflow-y: scroll;

इसे jsFiddle पर देखें ।

सूचना यदि आप संपत्ति -yसे निकालते overflow-yहैं, तो क्षैतिज स्क्रॉल बार दिखाया गया है।

Answer 5

इस कोड को अपने सीएसएस में जोड़ें। यह क्षैतिज स्क्रॉलबार को अक्षम कर देगा।

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

Answer 6

कोई स्क्रॉल नहीं (एक्स या वाई को निर्दिष्ट किए बिना):

.your-class {
   overflow: hidden;
}

क्षैतिज स्क्रॉल निकालें:

.your-class {
   overflow-x: hidden;
}

ऊर्ध्वाधर स्क्रॉल निकालें:

.your-class {
   overflow-y: hidden;
}

Comments

ओपी को स्क्रॉलबार के बिना स्क्रॉलिंग की आवश्यकता है

— T26635

Answer 7

क्षैतिज स्क्रॉलबार छुपाने के लिए, हम केवल आवश्यक div के स्क्रॉलबार का चयन कर सकते हैं और इसे सेट कर सकते हैं display: none;

एक बात ध्यान देने वाली है कि यह केवल WebKit- आधारित ब्राउज़र (जैसे क्रोम) के लिए काम करेगा क्योंकि मोज़िला के लिए ऐसा कोई विकल्प उपलब्ध नहीं है।

स्क्रॉलबार का चयन करने के लिए, का उपयोग करें ::-webkit-scrollbar

तो अंतिम कोड इस तरह होगा:

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

Answer 8

क्षैतिज स्क्रॉल बार को निकालने के लिए, निम्न कोड का उपयोग करें। यह 100% काम करता है।

html, body {
    overflow-x: hidden;
}

Answer 9

यदि आपके पास क्षैतिज रूप से अतिप्रवाह कुछ भी नहीं है, तो आप बस उपयोग भी कर सकते हैं

overflow: auto;

और यह केवल जरूरत पड़ने पर स्क्रॉलबार दिखाएगा।

सीएसएस अतिप्रवाह संपत्ति देखें

Answer 10

उपयोग:

overflow: auto;

यह ऊर्ध्वाधर स्क्रॉलबार को दिखाएगा और केवल अगर कोई ऊर्ध्वाधर अतिप्रवाह है, अन्यथा, इसे छिपाया जाएगा।

यदि आपके पास एक एक्स और वाई दोनों अतिप्रवाह है, तो एक्स और वाई स्क्रॉलबार दोनों दिखाए जाएंगे।

एक्स (क्षैतिज) स्क्रॉलबार को छिपाने के लिए, भले ही वर्तमान में जोड़ें:

overflow-x: hidden;

body {
    font-family: sans-serif;
}

.nowrap {
    white-space: nowrap;
}

.container {
    height: 200px;
    width: 300px;
    padding 10px;
    border: 1px solid #444;

    overflow: auto;
    overflow-x: hidden;
}

<div class="container">
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li class="nowrap">Item 8 and some really long text to make it overflow horizontally.</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
  <li>Item 17</li>
</ul>
</div>

Answer 11

को छिपाने के लिए scrollbar, लेकिन व्यवहार रखें।

div::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

---

इसकी सीमाएँ हैं।

• https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

Answer 12

इस कोड का उपयोग करें ..

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

Answer 13

मैं मुद्दों का उपयोग कर रहा था जहाँ मैं उपयोग कर रहा था

overflow: none;

लेकिन मुझे पता था कि सीएसएस वास्तव में इसे पसंद नहीं करता था और यह 100% काम नहीं करता था कि मैं इसे कैसे चाहता हूं।

हालाँकि, यह एक सही समाधान है क्योंकि मेरी कोई भी सामग्री उद्देश्य से बड़ी नहीं है और इसने मेरे द्वारा तय की गई समस्या को ठीक कर दिया है।

overflow: auto;