jqueryjquery-jscroll

jScroll not working


my jScroll is not working, although I followed the example on http://jscroll.com/#example Am I doing it wrong? I have very little experience with jQuery.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="jquery.jscroll.min.js"></script>
<script>
$('.scroll').jscroll();
</script> 
</head>
<body>
<div class="scroll">
    <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
</div>
</body>
</html>

Solution

  • Wait a sec - what are you trying to achieve..? Having looked at the documentation for jScroll, I'm not sure you're using it as intended.

    It's for lazy loading. That means, you have:


    Content...... Content...... Content...... Content...... Content...... Content...... Content...... Content...... Content...... Content...... Content......
    [Link to more content]


    When you scroll down to [Link to more content], it'll load the content from that page.

    Are you trying to have your 'very long content' fixed in a box with a scrollbar? If so, use CSS for that...

    div.scroll {
        height: 200px;
        overflow: auto;
        background:#ffe;
    }
    

    http://jsfiddle.net/jy3v2n25/


    Try and wrap your $('.scroll').jscroll(); in $(document).ready().

    <script>
    $(document).ready(function(){
        $('.scroll').jscroll();
    });
    </script>