क्षैतिज स्क्रॉलिंग के साथ ही विभाजित करें


88

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

इसके लिए केवल IE6 और IE7 (आंतरिक क्लाइंट एप्लिकेशन) पर काम करना होगा।

IE7 में निम्नलिखित काम करता है:

overflow-x: scroll;

किसी को भी IE6 में काम करता है कि एक समाधान के साथ मदद कर सकता हूँ?


अतिप्रवाह-एक्स संपत्ति को IE6 में बस ठीक काम करना चाहिए; आपके पास जटिल कारक हो सकते हैं। क्या आप एक परीक्षण मामला पोस्ट कर सकते हैं जो समस्या को प्रदर्शित करता है?
बेन ब्लैंक

ऐसा लगता है कि मेरा मुद्दा कहीं और है - मेरा युक्त DIV इसके कंटेनर में बह रहा है।
रिचर्ड ईव

जवाबों:


195

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

.container {
    width: 30em;
    overflow-x: auto;
    white-space: nowrap;
}

आप अंत-परिणाम यहां , या नीचे एनीमेशन में देख सकते हैं । यदि तालिका आपके कंटेनर की ऊंचाई निर्धारित करती है, तो आपको स्पष्ट रूप से सेट overflow-yकरने की आवश्यकता नहीं होनी चाहिए hidden। लेकिन समझें कि यह भी एक विकल्प है।

यहाँ छवि विवरण दर्ज करें


4
मुझे याद आ रहा था white-space: nowrap;। एक जादू की तरह काम करता है!
आंद्रेफेइजो

4
अगर एक तस्वीर एक हजार शब्दों के लायक है, तो एक gif एक मिलियन के लायक है।
होल्डऑफहुंगर

आप चैंपियन हैं, मेरे दोस्त।
स्पेंसर विलियम्स

क्या होगा अगर मुझे हर कॉलम पर अलग-अलग वर्टिकल स्क्रॉल की जरूरत है और मेन-कंटेनर पर कोई वर्टिकल स्क्रॉल नहीं है? मैं कोशिश कर रहा हूं कि white-space: nowrap;मुख्य-कंटेनर और सेटिंग पर heightऔर overflow-y: scrollव्यक्तिगत कॉलम के साथ, लेकिन यह काम नहीं कर रहा है।
सचिन

श्वेत-स्थान: Nowrap; मैं हमेशा उस में गिर रहा हूँ! बहुत बढ़िया जवाब!
talsibony

68

मुझे काम करने के लिए चयनित उत्तर नहीं मिला, लेकिन थोड़ी खोजबीन के बाद , मैंने पाया कि क्षैतिज स्क्रॉलिंग डिव का होना आवश्यक हैwhite-space: nowrap सीएसएस में ।

यहाँ पूरा काम कोड है:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Something</title>
    <style type="text/css">
        #scrolly{
            width: 1000px;
            height: 190px;
            overflow: auto;
            overflow-y: hidden;
            margin: 0 auto;
            white-space: nowrap
        }

        img{
            width: 300px;
            height: 150px;
            margin: 20px 10px;
            display: inline;
        }
    </style>
</head>
<body>
    <div id='scrolly'>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
        <img src='img/car.jpg'></img>
    </div>
</body>
</html>

2
"व्हाइट-स्पेस: नॉवरैप" का सुझाव यहां प्रतीत होता है कि इसे सही उत्तर में मिश्रित किया गया है। स्वीकृत उत्तर में सुधार के लिए +1।
होल्डऑफहुंगर


18

क्षैतिज स्क्रॉल के लिए, इन दो गुणों को ध्यान में रखें:

overflow-x:scroll;
white-space: nowrap;

कार्य लिंक देखें: मुझे क्लिक करें

एचटीएमएल

<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better   control of the layout. The default value is visible.You can use the overflow property when you want     to have better control of the layout. The default value is visible.</div>

सीएसएस

div.scroll
{
background-color:#00FFFF;
height:40px;
overflow-x:scroll;
white-space: nowrap;
}

5

इसे इस्तेमाल करे:

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

सीएसएस:

.container {
  width: 200px;
  height: 100px;
  display: flex;
  overflow-x: auto;
}

.item {
  width: 100px;
  flex-shrink: 0;
  height: 100px;
}

सफेद-स्थान: नॉरैप; संपत्ति न आप पाठ लपेटो। केवल एक उदाहरण के लिए यहां देखें: https://codepen.io/oezkany/pen/YoVgYK

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.