DIV z przewijaniem poziomym

89

Mam stałą szerokość DIV zawierającą tabelę z wieloma kolumnami i muszę pozwolić użytkownikowi na przewijanie tabeli w poziomie w DIV.

Musi to działać tylko na IE6 i IE7 (wewnętrzna aplikacja klienta).

Następujące działa w IE7:

overflow-x: scroll;

Czy ktoś może pomóc w rozwiązaniu, które działa również w IE6?

html css Richard Ev
źródło
Właściwość overflow-x powinna działać dobrze w IE6; możesz mieć skomplikowane czynniki. Czy możesz opublikować przypadek testowy, który wykazuje problem?
Ben Blank,
Wygląda na to, że mój problem jest gdzie indziej - mój zawierający DIV przelewa się do swojego pojemnika.
Richard Ev

Odpowiedzi:

196

Rozwiązanie jest dość proste. Aby mieć pewność, że nie wpłyniemy na szerokość komórek w tabeli, wyłączymy spacje . Aby mieć pewność, że otrzymamy poziomy pasek przewijania, włączymy overflow-x . I to prawie wszystko:

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

Możesz zobaczyć efekt końcowy tutaj lub na animacji poniżej. Jeśli tabela określa wysokość twojego kontenera, nie musisz jawnie ustawiać overflow-yna hidden. Ale zrozum, że to również opcja.

wprowadź opis obrazu tutaj

Sampson
źródło
4
Brakowało mi white-space: nowrap;. Działa jak marzenie!
AndreFeijo,
4
Jeśli obraz jest wart tysiąca słów, gif jest wart milion.
HoldOffHunger
Jesteś mistrzem, przyjacielu.
Spencer Williams
Co się stanie, jeśli potrzebuję również indywidualnego przewijania w pionie w każdej kolumnie i bez przewijania w pionie w głównym kontenerze? Próbuję to zrobić white-space: nowrap;na głównym kontenerze i ustawieniach heightoraz overflow-y: scrollna poszczególnych kolumnach, ale to nie działa.
Sachin
spacja: nowrap; Zawsze w to wpadam! dzięki świetna odpowiedź!
talsibony
68

Nie udało mi się uzyskać wybranej odpowiedzi, ale po kilku badaniach stwierdziłem, że element div z przewijaniem poziomym musi mieć white-space: nowrapw css.

Oto pełny działający kod:

<!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>
WKS
źródło
2
Wydaje się, że sugestia „white-space: nowrap” została tutaj dodana do poprawnej odpowiedzi. +1 za poprawienie zaakceptowanej odpowiedzi.
HoldOffHunger
21 
overflow-x: scroll;
overflow-y: hidden;

EDYTOWAĆ:

Mi to pasuje:

<div style='overflow-x:scroll;overflow-y:hidden;width:250px;height:200px'>
    <div style='width:400px;height:250px'></div>
</div>
Diodeus - James MacFarlane
źródło
18

W przypadku przewijania w poziomie pamiętaj o tych dwóch właściwościach:

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

Zobacz działający link: kliknij mnie

HTML

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

CSS

div.scroll
{
background-color:#00FFFF;
height:40px;
overflow-x:scroll;
white-space: nowrap;
}
ankitd
źródło
5

Spróbuj tego:

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>

CSS:

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

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

Biała przestrzeń: nowrap; właściwość nie pozwala na zawijanie tekstu. Zobacz tutaj przykład: https://codepen.io/oezkany/pen/YoVgYK

oezkany
źródło