Div только с горизонтальной прокруткой

89

У меня есть DIV фиксированной ширины, содержащий таблицу со многими столбцами, и мне нужно разрешить пользователю прокручивать таблицу по горизонтали в DIV.

Это должно работать только в IE6 и IE7 (внутреннее клиентское приложение).

В IE7 работает следующее:

overflow-x: scroll;

Может ли кто-нибудь помочь с решением, которое работает и в IE6?

html css Ричард Ив
источник
Свойство overflow-x должно нормально работать в IE6; у вас могут быть осложняющие факторы. Можете ли вы опубликовать тестовый пример, который демонстрирует проблему?
Бен Бланк,
Похоже, моя проблема в другом месте - мой содержащий DIV переполняется в свой контейнер.
Ричард Эв,

Ответы:

196

Решение довольно простое. Чтобы не повлиять на ширину ячеек в таблице, мы отключим пробелы . Чтобы получить горизонтальную полосу прокрутки, мы включим overflow-x . Вот и все:

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

Вы можете увидеть конечный результат здесь или на анимации ниже. Если таблица определяет высоту вашего контейнера, вам не нужно явно устанавливать overflow-yзначение hidden. Но поймите, что это тоже вариант.

введите описание изображения здесь

Сампсон
источник
4
Мне не хватало файла white-space: nowrap;. Работает как шарм!
AndreFeijo
4
Если картинка стоит тысячи слов, гифка стоит миллион.
HoldOffHunger 03
Ты чемпион, мой друг.
Спенсер Уильямс
Что, если мне нужна отдельная вертикальная прокрутка для каждого столбца и без вертикальной прокрутки в основном контейнере? Я пытаюсь сделать это с помощью white-space: nowrap;основного контейнера и настройки heightи overflow-y: scrollдля отдельных столбцов, но это не работает.
Sachin
белое пространство: nowrap; Я всегда попадаю в это! спасибо отличный ответ!
Талсибоны
68

Я не мог заставить выбранный ответ работать, но после небольшого исследования я обнаружил, что div с горизонтальной прокруткой должен быть white-space: nowrapв css.

Вот полный рабочий код:

<!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
источник
2
Предложение "white-space: nowrap" здесь, кажется, было объединено в правильный ответ. +1 за улучшение принятого ответа.
HoldOffHunger 03
21 
overflow-x: scroll;
overflow-y: hidden;

РЕДАКТИРОВАТЬ:

Меня устраивает:

<div style='overflow-x:scroll;overflow-y:hidden;width:250px;height:200px'>
    <div style='width:400px;height:250px'></div>
</div>
Диодей - Джеймс Макфарлейн
источник
18

Для горизонтальной прокрутки помните об этих двух свойствах:

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

См. Рабочую ссылку: нажмите меня

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
источник
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>

CSS:

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

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

Белое пространство: nowrap; свойство не позволяет переносить текст. Просто посмотрите здесь пример: https://codepen.io/oezkany/pen/YoVgYK

Oezkany
источник