treehouse : what would you like to learn today?
Web Design Web Development iOS Development

JavaScript/CSS scrollbar -- Scrollbar not showing up

  • I'm trying to achieve this: Link here.

    I've obviously never tried this effect before, perhaps I'm not following the tutorial properly. But the scrollbar is not appearing for me, can anyone please tell me what I'm doing wrong? Here is My site. And the codes:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://casildasdesigns.webs.com/jp.css&quot; type="text/css">
    <link rel="stylesheet" href="http://casildasdesigns.webs.com/ajavascroll.css&quot; type="text/css">
    <noframes></noframes><noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript" src="http://casildasdesigns.webs.com/ajavascroll.js"></script&gt;

    <title>My Testing Page</title>

    </head>

    <body>

    <div id="wrap">


    <li><a href="http://">Test</a>&nbsp; &nbsp; &nbsp; <a href="#home">Test</a> &nbsp; &nbsp; &nbsp; <a href="#home">Test</a>&nbsp; &nbsp; &nbsp; <a href="#home">Test</a>&nbsp; &nbsp; &nbsp; <a href="#home">Test</a></li>

    <div id="content"> <div id="scrollbar_container">
    <div id="scrollbar_track"><div id="scrollbar_handle"></div></div>
    <div id="scrollbar_content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
    illo inventore veritatis et quasi architecto beatae vitae dicta sunt
    explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
    odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
    voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
    quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
    eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
    voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam
    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
    Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
    quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
    voluptas nulla pariatur?<br><br>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
    illo inventore veritatis et quasi architecto beatae vitae dicta sunt
    explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
    odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
    voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
    quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
    eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
    voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam
    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
    Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
    quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
    voluptas nulla pariatur? <br><br>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
    commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
    velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
    accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
    illo inventore veritatis et quasi architecto beatae vitae dicta sunt
    explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
    odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
    voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
    quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
    eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
    voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam
    corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
    Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse
    quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo
    voluptas nulla pariatur? </div></div>

    </p></div></div>
    </body>
    </html>




  • The first thing I noticed was that you had an overflow:hidden in your CSS but I didn't get a good look at your script file. On that note though, I like to use this for fancy scrollbars. jScrollPane
  • My first guess is that the scrollbar doesn't appear because it's not needed: the content fits in the box. What if you add two more large paragraphs?
  • theacefes @ Thanks for the link! But the overflow doesn't quite work.

    Senff @ No, I have 4 large paragraphs and the height: 400px

    I don't understand why it's not showing up.. This is frustrating. O_o
  • I created another page using those codes as the internal style sheet and it's still not working. I just don't understand why...
  • I don't understand, what should I do?
  • You need to change it to right: 0;
    It probably won't fix it though, it's a JavaScript error. This line:

    var scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track'); 
    Gives me the error "Can't find variable: Control".
  • Oyy, I just can't figure it out. Thanks for helping me, though! :)