I have the following css and html :
<head>
<style type="text/css">
ul > li {
position:relative;
margin:0;
list-style:none;
padding:0;
}
ul{
padding:0;
margin:0;
}
</style>
</head>
<body >
<div style="position:absolute;top:40%;width:100;height:50%;border:1px solid red;overflow:auto;offsetTop:10px">
<!--<a onclick='calla()' disabled="disabled">Delete</a>-->
<ul>
<?php
for ($i=0;$i<50;$i++){
?>
<li>Test li_<?php echo $i; ?>
</li>
<?php
}
?>
</ul>
</div>
The above code creates a vertical scrollbar for the div and by default the scrollbar always comes at the top. If I want to change the scrollbar location ie. say at the middle or anywhere according to the height I give(so that the visible li components also change), How can I go about doing it?
Solution both in html/css and javascript(dynamically) is most welcome.