2

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>
HCLivess
  • 1,015
  • 1
  • 13
  • 21

3 Answers3

1

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>

Dave Salomon
  • 3,287
  • 1
  • 17
  • 29
  • Thank you, I have already tried that, and it did not help. Live demo at http://hardcoregaming.eu/qtr/test.php There must be something basic I am missing – HCLivess Sep 03 '15 at 11:19
  • @user1793606 Updated answer - think you misunderstand what jScroll's for :). – Dave Salomon Sep 03 '15 at 11:29
  • Thanks, you are right. I thought it would sequentially load the page and only show a small piece at first, expand as the user is scrolling :) – HCLivess Sep 03 '15 at 11:36
  • 1
    @user1793606 Happy to help. You might be looking for something more like [scrollReveal.js](https://github.com/jlmakes/scrollReveal.js). If you fancy really learning jQuery, it might be a nice little exercise to write something yourself - I'd suggest starting by reading up on [jQuery scroll events](https://api.jquery.com/scroll/) and [jQuery.offset](http://api.jquery.com/offset/). Good luck! – Dave Salomon Sep 03 '15 at 11:50
1

Without using a framework example run:

https://jsfiddle.net/Limitlessisa/t8wk1o8L/8

Html:

<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<div id="comments_area" next="/user/login">Null</div>

Js:

    window.addEventListener('scroll', function(evt) {
        if(lij){lijScroll();}
    });
    var lij=true;
    var lijScroll= function(){
        var elem=$('#comments_area');
        if(!elem.length){
          lij=false; 
          return false
        }
        var scrollingElement = document.scrollingElement || document.documentElement; // all browser + Firefox
        var distance_from_top = scrollingElement.scrollTop;
        var elementPos = elem.offset().top - $(window).height();
        if(distance_from_top>elementPos){
            lij=false;
            $(elem).html('Loading...');
            $.ajax({
                type: 'POST',
                url: $(elem).attr('next'),
                data: null,
                dataType: 'html',
                context: document.body
            }).done(function(data) {
                $(elem).html(data);
            });
        }
    }
Limitless isa
  • 3,689
  • 36
  • 28
1

I liked the Script of Limitless isa that much, i improved it to use jquery.

It loads elements from a link, and then appends them into a div element.

$(function() {
 var lij=true;
 var newrun = 0;
 var oldrun = 0;
 var lijScroll= function() {
  if(newrun > oldrun) {
   return;
  }
  newrun++;
  var cont=$('#list');
  var elem=$('#next');
  var scrollingElement = document.scrollingElement || document.documentElement; // all browser + Firefox
  var distance_from_top = scrollingElement.scrollTop;
  var elementPos = elem.offset().top - $(window).height();
  if(distance_from_top>elementPos) {
   $(elem).html('Loading...');
   $.ajax({
    type: 'POST',
    url: $(elem).attr('href'),
    data: null,
    dataType: 'html',
    context: document.body
   }).done(function(data) {
    datawrap = '<div>'+data+'</div>';
    datadom = $(datawrap);
    oldlist = "";
    cont.find('.grid-item').each(function(index) {
     oldlist += $(this)[0].outerHTML;
    });
    //alert("oldlist: "+oldlist);
    appendlist = "";
    $(datadom).find('.grid-item').each(function(index) {
     appendlist += $(this)[0].outerHTML;
    });
    //alert("appendlist: "+appendlist);
    nextlink = $(datadom).find("#next")[0].outerHTML;
    //alert("nextlink: "+nextlink);
    $(cont).html(oldlist+appendlist);
    $(elem).replaceWith(nextlink);
    //lij = false; //Break after first run old impl
    oldrun++;
   });
  }
 }
 window.addEventListener('scroll', function(evt) {
   //if(lij) { lijScroll(); } //Old single run impl
   lijScroll();
 });
});
1u1u
  • 141
  • 1
  • 5