Untitled

<html>
<head>
<link rel="stylesheet" href="css/scroll.css" type="text/css" media="print">
<script src="js/jquery.js"></script>
<script>
// execute your scripts when DOM is ready. this is a good habit
$(function() {

    // initialize scrollable
    $("div.scrollable").scrollable({
        vertical:true,
        size:10,
        clickable:false

    // use mousewheel plugin
    }).mousewheel();

    // get handle to scrollable API
    var api = $("div.scrollable").scrollable();

    // append new item using jQuery's append() method
    for (i = 0 ; i < 30 ; i++) {
        api.getItemWrap().append(
        '<p>added'+i+'</p>'
        );
    }

    api.reload().end();
});
</script>
</head>
<body>


        <div class="scrollable vertical">

            <!-- root element for the items -->
            <div class="items">

            </div>

        </div>


</body>
</html>