CODEWITHSUNDEEP
css
Janese
Janese

Reputation: 751

How can I add a scroll bar to a DIV?

I have a DIV on my page. Within the DIV I have other DIVs which I customize to look like buttons. Here's an example:

fiddle

Because I have so many buttons I need to have some means of scrolling so that the user can scroll down to the correct button (DIV). In the fiddle this is done using an iframe but I think I read that this can give problems with search engine optimization.

Is there some way that I can add a scroll bar to my DIV? I have never seen this done but I hope someone has some ideas.

Thanks,

Upvotes: 0

Views: 172

Answers (4)

ayyp
ayyp

Reputation: 6598

You need to set a height on the div and add overflow:auto;. I forked your fiddle, here's the code: http://jsfiddle.net/vxTqT/.

Upvotes: 0

JFFF
JFFF

Reputation: 989

If you're willing to use some JQuery, JScroll Pane plugin is exactly what you're looking for

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

You could do something like this:

Add

padding-right:30px; overflow:auto; height:500px;

to the main div

http://jsfiddle.net/jasongennaro/AQ7Ev/7/

You will need to set a height to make it work.

Also, you will need padding so the scroll bar does not overlap the content.

Upvotes: 1

fatnjazzy
fatnjazzy

Reputation: 6152

set the height for the containing div + overflow:auto or : scroll

<div style="width: 200px; height:240px;overflow:auto">
      <div class = "abc" >.....

Upvotes: 0

Related Questions