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开发者_StackOverflow中文版 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,

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.

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

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

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

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/.