scrollbar [Archive] - Dynamic Drive Forums

brent2

06-12-2011, 09:19 PM

Hi,
My problem is when using my website users have to use both the scrollbar inside my main text div as well as the browser scrollbar in order to get to the bottom of the text in the div.

How can I get the div scrollbar to scroll all the way to the bottom without having to use the browser scrollbar also?

Is it possible to compress the div scroll bar so you can go from top to bottome without having to use the browswer scrollbar to get to the bottom?

my website is http://www.thefranchise-connection.com

Any help would be MUCH appreciated.

Thanks

vwphillips

06-13-2011, 09:47 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.maindiv {
position:absolute;overflow:hidden;left:100px;top:100px;width:200px;height:400px;border:solid red 1px;
}

#maindiv{
position:absolute;width:200px;height:900px;border:solid red 1px;
}

.panel {
width:200px;height:100px;background-Color:#FFCC66;
}

#scrolldiv {
position:absolute;overflow:auto;left:180px;top:0px;width:20px;height:200px;
}

#scrolldiv DIV{
width:0px;height:400px;border:solid red 0px;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function Scroll(s,id){
var max=(s.scrollHeight-s.offsetHeight),obj=document.getElementById(id),mmax=obj.offsetHeight-obj.parentNode.offsetHeight;
obj.style.top=-mmax*(s.scrollTop+.001)/max+'px';
}

/*]]>*/
</script>

</head>

<body>

<div class="maindiv" >
<div id="maindiv">
<div class="panel" >1</div>
<div class="panel" style="background-Color:#FFFFCC">2</div>
<div class="panel" >3</div>
<div class="panel" style="background-Color:#FFFFCC">4</div>
<div class="panel" >5</div>
<div class="panel" style="background-Color:#FFFFCC">6</div>
<div class="panel" >7</div>
<div class="panel" style="background-Color:#FFFFCC">8</div>
<div class="panel" >9</div>
</div>
<div id="scrolldiv" onscroll="Scroll(this,'maindiv');"><div></div></div>
</div>

</body>

</html>