Div только с горизонтальной прокруткой - PullRequest
Новая
       25

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

68 голосов
/ 14 января 2009

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

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

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

overflow-x: scroll;

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

Ответы [ 4 ]

131 голосов
/ 14 января 2009

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

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

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

enter image description here

62 голосов
/ 03 марта 2013

Я не смог получить выбранный ответ для работы, но после небольшого исследования я обнаружил, что у горизонтальной прокрутки 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>
20 голосов
/ 14 января 2009 
overflow-x: scroll;
overflow-y: hidden;

EDIT:

У меня работает: 

<div style='overflow-x:scroll;overflow-y:hidden;width:250px;height:200px'>
    <div style='width:400px;height:250px'></div>
</div>
16 голосов
/ 30 июля 2014

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

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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...