How should I implement jScroll in a basic HTML page?

Question

I'm trying to replicate this useless website: http://endless.horse, but the jScript documentation does not do a great job of explaining how to implement it.

Basically, I need a block of text "Body" to be at the top, then for a block of text "Legs" to appear infinitely (as placeholders) (see website).

I've tried adding what the website says: http://jscroll.com, but it only says "[element].jscroll()" and that's it. I've also tried copying the code from the website, but that also doesn't work.

Here is the code I'm using: DIV that should scroll:

<div class="jscroll">
    <pre>
        <h1>Body</h1>
    </pre>
    <a href="rest.html"></a>
</div>

rest.html:

<pre>
    Legs
</pre>
<a href="rest.html"></a>

Code was taken from the website

javascript/jquery/jscroll:

$(function() {
    $('.jscroll').jscroll({
        autoTrigger: true,
        padding: 2000px,
        nextSelector: "rest.html"
    });    
});

I thought I would get a scrolling webpage with "Body" and "Legs", but I got just "Body" instead.

maanijou · Accepted Answer · 2019-04-01 16:42:10Z

1

Assuming that you have included the right js and you run your script when the document is ready, the following code works for you:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/jquery.jscroll.min.js"></script>

<div class="jscroll">
    <pre>
        <h1>Body</h1>
    </pre>
    <a href="rest.html"></a>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) { 
  $(function() {
      $('.jscroll').jscroll({
          autoTrigger: true,
          padding: 2000,
          nextSelector: "a:last"
      });   
  }); 
});

</script>

Basically, you need to change your nextSelector to be more specific and you must put a real jquery selector. 'a:last' always selects the last a tag that is available. Also, you need to change 2000px to 2000. this code worked for me. Don't forget to include more characters to your rest.html output.

edited Apr 1, 2019 at 16:42

answered Apr 1, 2019 at 16:12

maanijou

1,0771 gold badge14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

wtrfl Over a year ago

I'm not sure what the problem is here: repl.it/@Deximal/jScroll

maanijou Over a year ago

You forgot to include your script.js file add ` <script src="script.js"></script>`

maanijou Over a year ago

Also I have changed js files path. It seems like you have problem loading them in your server with https.

wtrfl Over a year ago

with only http legs appears but really slowly

maanijou Over a year ago

It works fast on local. That's another matter and it depends heavily on the network traffic. When jsscrol feels like it need to scroll it sends a request to get more data from server. It actually loads the last a tag and sends a get request to it's href. in this particular situation it sends a separate request to rest.html with each scroll it does.

Collectives™ on Stack Overflow

How should I implement jScroll in a basic HTML page?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related