CODEWITHSUNDEEP
javascriptcsshtmlscroll
Arco_Pelago
Arco_Pelago

Reputation: 325

How to scroll in a div?

I've got a div the images in it. There are going to be a lot of images so I want to be able to scroll down within the div. How do I do that?

Thanks :)

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

My JavaScript is empty so there is no point showing.

Upvotes: 0

Views: 149

Answers (5)

Zack
Zack

Reputation: 106

overflow:scroll;

should work for this purpose

overflow-y:scroll;

will create scroll bar horizontally, if you want to scroll content from left to right ( or vice verse ) 

overflow-x:scroll;

will create scroll bar vertically

Upvotes: 2

Charlie74
Charlie74

Reputation: 2903

Changing your CSS to something like this:

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

would work. overflow: scroll; allows the scrollbar to appear. Setting the height keeps the DIV from expanding automatically.

I've created a DEMO here to show how it would look with content above, content below, and a scrollable DIV.

Upvotes: 0

silicakes
silicakes

Reputation: 6902

Using the following code:

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

You'll have a scroll once the images exceed the height of the container, otherwise - the scroller won't appear.

Upvotes: 4

Vicky Gonsalves
Vicky Gonsalves

Reputation: 11717

#TextureView{ 
overflow-y:scroll;
height:500px;
}

modify your css and keep div's height as per your need

Upvotes: 1

Los Frijoles
Los Frijoles

Reputation: 4821

You need to set the overflow to be scroll:

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

This will cause a scroll bar to appear once the inside exceeds the height specified (it doesn't have to be 400px). Alternately you can say just overflow-y to get a only vertical scroll bar.

Upvotes: 1

Related Questions