Как прокрутить в div?

0

У меня есть div в нем. Там будет много изображений, поэтому я хочу прокрутить вниз в div. Как мне это сделать?

благодаря :)

HTML:

<div id="TextureView">
    <div id="TextureViewInside">
        <ul class="products">
             <img src="FärgadePapper.png">
             <img src="Hajar.png">
             <img src="Labyrint.png">
             <img src="Martini.png">
             <img src="FärgadePapper.png">
             <img src="Hajar.png">
             <img src="Labyrint.png">
             <img src="Martini.png">
        </ul>
    </div>
</div>

CSS:

#TextureView{
    overflow: hidden;
}
#TextureViewInside{
    padding: 7px;
}
ul.products img{
    width: 80px;
    display: inline-block;
    vertical-align: top;
    padding: 4px;
}

мой javascript пуст, поэтому нет смысла показывать...

Теги:
scroll

5 ответов

4
Лучший ответ

Используя следующий код:

#TextureView { 
  height: 450px;
  overflow: auto;
}

У вас будет свиток, когда изображения превысят высоту контейнера, иначе - скроллер не появится.

Поделиться
  • 0
    +1 за использование overflow: auto вместо overflow:scroll
  • 0
    Кроме того, если вы хотите поддерживать физическую ускоренную прокрутку на iPhone, добавьте -webkit-overflow-scrolling: touch .
2 
overflow:scroll;

должен работать для этой цели

overflow-y:scroll;

будет создавать полосу прокрутки горизонтально, если вы хотите пролистывать контент слева направо (или наоборот)

overflow-x:scroll;

создаст полосу прокрутки по вертикали

Поделиться
  • 0
    Было бы идеально, чтобы объяснить overflow-x и overflow-y также
1

Вам нужно настроить прокрутку переполнения:

#TextureView { overflow: scroll; height: 400px; }

Это приведет к появлению полосы прокрутки, когда внутренняя часть превысит указанную высоту (она не должна быть 400px). В качестве альтернативы вы можете просто overflow-y чтобы получить только вертикальную полосу прокрутки.

Поделиться
  • 0
    Он покажет отключенную полосу прокрутки, если изображения не превышают высоту контейнера.
  • 0
    Почему отрицательный голос?
1 
#TextureView{ 
overflow-y:scroll;
height:500px;
}

изменить свой css и сохранить высоту div в соответствии с вашими потребностями

Поделиться
0

Изменение вашего CSS на что-то вроде этого:

#TextureView{
    overflow: scroll;
    height: 200px;
}

должно сработать. overflow: scroll; позволяет отображать полосу прокрутки. Установка height позволяет DIV автоматически расширяться.

Я создал DEMO здесь, чтобы показать, как он будет выглядеть с содержанием выше, содержанием ниже и прокручиваемым DIV.

Поделиться
  • 0
    Почему проголосовали? Это работает ... и демо было предоставлено.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню