Advanced Search

Results 1 to 3 of 3

Thread: scrollbar

  1. #1
    Join Date
    Feb 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default scrollbar

    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

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,709
    Thanks
    2
    Thanked 389 Times in 384 Posts

    Default

    Code:
    <!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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Feb 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the reply this helped!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •