Hi there,

I've tried to implement jScroll at http://dev.agderposten.no/cxense/va-lazy.php but the problem is it never stops loading. It's like I'm always at the bottom. I added autoTriggerUntil: 5 just to make it stop at some point.

Any idea what could cause this? I've tried in Safari, Chrome and Firefox and I also tried removing the CSS but didn't help.

I've been trying to make this userscript in order to use jScroll it https://openuserjs.org/

$('table')[0].jscroll({
  nextSelector: $('ul.pagination > li > a')[1],
  contentSelector: $('tbody:nth-of-type(1) > tr.tr-link').slice(0,24),
  callback: function () {
     $('ul.pagination')[1].remove();
  }
});

First of all, in that page, the "Scripts" table is the 1st (the other is the "Announcements" table), so I used $('table')[0].jscroll({. But, unfortunately I get $(...)[0].jscroll is not a function in FIrefox's Browser Console, therefore the script cannot be executed. Shouldn't this work, though?

Also, the main problem is that, in that page, there's no 'Next' page, but only links to p.1,2,etc. So, I used nextSelector: $('ul.pagination > li > a')[1], as a reference, but, how could I select each nextSelector? (i.e. if I'm on page 1, the nextSelector will be the a to page 2. If then it paginates 2, it will be 3, etc)

This is the URL to reproduce:

http://test.plumaz.com/library/

I begin to scroll down and more content rows appear below before the getting to the scrolling point , ..

What am I doing wrong ?

Hi, I'm trying to use Jscroll to make a homepage of an image gallery script load the newest images as the user scrolls. A pretty standard usage of Jscroll I imagine. The problem I'm having is that Jscroll just loads every single page it can back to the beginning of time the moment it is triggered on the element, resulting it about 1GB of downloads and crashing the browser. To try to isolate the problem, I reduced the number of images per page down to one and extracted this example to its own page, but the problem persisted. `

The final link in the html is recursive. I'm imagining that it should load the image again when I hit the bottom of the div of images, but what's happening is that the html just loads recursively, infinitely, until the browser crashes. Here's a sample from the browser console of debugging output that Jscroll makes when this happens. js2.js:9432 jScroll: -8 from bottom. Loading next request... js2.js:9432 jScroll: -8 from bottom. Loading next request... js2.js:9432 Object js2.js:9432 jScroll: -8 from bottom. Loading next request... js2.js:9432 Object js2.js:9432 jScroll: -8 from bottom. Loading next request... js2.js:9432 Object js2.js:9432 jScroll: -8 from bottom. Loading next request... js2.js:9432 Object js2.js:9432 jScroll: -8 from bottom. Loading next request... js2.js:9432 Object js2.js:9432 jScroll: -8 from bottom. Loading next request... js2.js:9432 Object js2.js:9432 jScroll: -8 from bottom. Loading next request... js2.js:9432 Object js2.js:9432 jScroll: -8 from bottom. Loading next request... js2.js:9432 Object js2.js:9432 jScroll: -8 from bottom. Loading next request... js2.js:9432 Object

This is all it logs in the console no matter where I am scrolled in the div in question and no matter what browser I use. In MS Edge, it only actively loads pages while the user is actively scrolling, but in either direction. It might be worth noting that in my actual application, the console log's "-x from bottom", the x resembles the output of a random number generator set to generate numbers between 500 and 1000.

I've been trying to make this userscript in order to use jScroll it in thepiratebay (in the tables for Browse and Search results)

$('#searchResult').jscroll({    
    nextSelector: $('a').has('img[src="https://piratebay.org/img/next.gif"]'),
    contentSelector: 'tr',
    callback: function() {$('tr.header').remove();}
});

Test link: https://thepiratebay.gd/browse/401 Note:the nextSelector is the link that appears with the ">" arrow icon.
Unfortunately I got these problems:

1. jScroll only appends (the cells of) page 2 and not the others too. Below is the HTML of the a tag of the "Next" link (FWIW, the href value is a relative link)

   <a href="/browse/401/1/3">
     <img src="https://piratebay.org/img/next.gif" alt="Next" border="0"></img>
   </a>
   

   And, as you can see, the "Next" <a> anchor tag has no id or class so I had to use a jQuery selector in nextSelector in order to select it.

2. The rows from page 2 aren't properly aligned to the table from page 1. (screenshot) Isn't the contentSelector right?

I've made this userscript in order to use jScroll it in reddit.com and any subreddit

// ==UserScript==
// @name        Reddit jScroll
// @namespace   
// @include     http://www.reddit.com/*
// @version     1
// @grant       none
// @require     https://raw.githubusercontent.com/pklauzinski/jscroll/master/jquery.jscroll.min.js
// ==/UserScript==

$('span.nextprev').jscroll({
  contentSelector: 'div.content'   
});

where span.nextprev is the selector for the Next button and div.content is the selector for the links content of every next page.

If open eg. reddit.com without login, then it works ok (it appends every next page). The problem is when I try my userscript having login: it only appends page 2, not the next pages (it just shows Loading... at the end of the appended page 2 ) for example in:

1. http://www.reddit.com (I've only subscribed to 2 subreddits)
2. eg. http://www.reddit.com/r/firefox/

Is my userscript wrong or it'is jScroll?

How can I implement multiple jscroll in same page ?

I tired to implement 2 jscroll, but only one works, If i comment one the other one works.How can i make both of them work ?

regards, Prasanth

im using

    <script type="text/javascript">            
        $('.infinite-scroll').jscroll({
            debug: true,
            loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...',
            padding: 20,
            contentSelector: '.content',
            nextSelector: 'a.jscroll-next:last'                
        });                        
    </script>

but in the log says:

nextHref "page2.html .content .content" instead of "page2.html .content"

if I remove the contentSelector will work ok but with the unwanted html

When I don't have any content to load still it hit load. In my page there is no next link. So I change some _setBindings() and added bellow two lines

if (!$next.length)//if there is no next selector then don't need to bind scroll
   return false;

_setBindings = function() {
            var $next = $e.find(_options.nextSelector).first();
            if (!$next.length)
                return false;
            if (_options.autoTrigger && (_options.autoTriggerUntil === false || _options.autoTriggerUntil > 0)) {
                _nextWrap($next);
                if (_$body.height() <= _$window.height()) {
                    _observe();
                }
                _$scroll.unbind('.jscroll').bind('scroll.jscroll', function() {
                    return _observe();
                });
                if (_options.autoTriggerUntil > 0) {
                    _options.autoTriggerUntil--;
                }
            } else {
                _$scroll.unbind('.jscroll');
                $next.bind('click.jscroll', function() {
                    _nextWrap($next);
                    _load();
                    return false;
                });
            }
        },

I want to know is't correct or there is another way to do that or it has that type of functionality I implement it incorrectly that's why it hit load function thought there is no next page

Am I the only one that can't get it to work?

<html>
<head>
    <style>
    </style>
    <script type="text/javascript" src="jscroll.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
    $(window).load(function(){
        $('.scroll').jscroll();
    });
    </script>
</head>
<body>
    <div class="scroll">
        <h3>Page 1</h3>
        <p>Content here...</p>
        <a href="example-page2.html">next page</a>
    </div>
</body>
</html>

Nothing really happens.

http://jsfiddle.net/d2Lrm2a5/

When paginating search results returned from an AJAX call...

$('#search').keyup(function() {
    var search = $(this).val();
    $.get('/search', {search : search}, function(results) {
        $('.scroll-table').html(results);
        $('.scroll-table').jscroll();
    });
});

After getting the new set of search results, when we scroll to the bottom, jScroll appends content of the next page of the previous (old) query.

So if my last _nextHref was "/search?query=A&page=3" and I enter B in the search field, instead of loading "/search?query=B&page=2" from the new href, it would load "/search?query=A&page=3" from the old href.

Refresh option added to reinitialize the plugin on each load, to prevent it from loading the old href.

Usage:

$('.scroll').jscroll({
    refresh: true
});

Hi . i am using jscroll in pjax project and for loadingHtml i use below code loadingHtml: '<div class="text-center"><i class="fa fa-spinner fa-spin fa-fw"></i></div> Loading...',

but i get Uncaught SyntaxError: Invalid or unexpected token error . but when i reload page everything is ok.

… and autoTriggerLastFiredAt property to jScroll along with sensible defaults.

I ran across the jScroll library in the wild... I noticed that particular implementation was a bit broken, from a low bandwidth users perspective, as the page kept auto triggering before any of the images even loaded... I'm sure this is the fault of the site developers, for not styling their HTML so their images had sensible pre-defined dimensions... but I thought I would contribute a simple patch to account for that.

I am including jscroll as follows:

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/jquery.jscroll.min.js"></script>
<script>
$(document).ready(function(){
    $('.scroll').jscroll({
                autoTrigger: true,
                loadingHtml: '<img class="center-block" src="/images/loading.gif" alt="Loading..." />',
                padding: 0,
                nextSelector: '.pagination li.active + li a',
                contentSelector: 'div.infinite-scroll',
                callback: function() {
                    $('ul.pagination').remove();
                }
            });
    });
</script>

yet I am getting the error:

jQuery.Deferred exception: $(...).jscroll is not a function TypeError: $(...).jscroll is not a function

it's driving me crazy! any idea what's going on here? I am using it inside a Laravel blade.

I think it would be worth adding to the documentation, both in the README and on the jscroll.com website, how you can detect if jscroll is being applied and how to destroy it. This was important for me to know when to destroy the jscroll when switching from a scrolling tiles view to a list view. Something like this:

if ($('#content-container').data('jscroll') && view != 'tiles') {
  $('#content-container').jscroll.destroy();
}

Hello,

I am using jscroll on a search page in a laravel app and it doesn't work all the time. Sometimes jscroll doesn't load the second page, I can see from the telescope that the jscroll has requested for the second page and that the app has returned a valid response. However, jscroll doesn't add the new content in the view and keeps on showing the loading html. I have attached an image of the developer tool's console log when the result does not load in the view.

My jscroll js implementation looks like this.

window.addEventListener('load', initSearch);

function initSearch() {
    searchJScroll();
}

function searchJScroll() {
    const html = '<div class="text-muted align-items-center text-center"><i class="fas fa-2x fa-spinner fa-spin"></i> Loading...</div>';
    const options = {
        debug: true,
        autoTrigger: true,
        loadingHtml: html,
        padding: 0,
        nextSelector: '.pagination li.active + li a',
        contentSelector: '.jScroll',
        pagingSelector: '.pagination',
        callback: function () {
            $('ul.pagination').remove();
        }
    };

    $('.jScroll').jscroll(options);
}

Any insight would be greatly appreciated. Thanks.