jScroll always thinks user has scrolled beyond end of div - and immediately loads all pages.

[johncave]

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. `

` And the Javascript can be found in this paste http://pastebin.com/8Pphu1mq 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.

[johncave]

Here's a Mega link to an html file that demonstrates this in action https://mega.nz/#!w8tHWLKL!XUSYOfeeN7LTRg-S0PRXrbjx9gjeE0BI57o88rp55R0 . Note that Chrome won't execute the Javascript if opening it from hard drive due to CORS restrictions, but Firefox will.

[guanzo]

Hello pklauzinski. Jscroll seems to break when the jscroll container relies on the window to scroll, and not it's own scroll bar. Thus the jscroll calculations for scroll position get all messed up. If you download johncaves html and add height:100% to #images-wall, it fixes the issue. That should help you get started on the root cause.

[pklauzinski]

@johncave - are you using display: flex in your CSS for the content you are scrolling on?

[johncave]

@pklauzinski I've never heard of that CSS property before, so no I wasn't. Though I have it working in isolation now, I've determined that jScroll also doesn't work on a Masonry grid div (Masonry sets the height to an exact number of pixels as part of how it works and for some reason this makes jScroll unable to tell how much is left of the div too) so that is also an issue for me.

[spokospace]

Hello, I have similar problem on one of my website, jscroll loads all pages

example: http://gotowysms.pl/teksty-sms/milosne

Any idea?

[johncave]

@CNK001 I use a very similar layout to you but with images instead of words. I eventually didn't end up using jScroll, but everything I tried had the same issue, and how I fixed the issue was to rip out the fancy math they all seem to use to find the bottom of the div, then replace it with a simple "how far down the screen has the user scrolled? Is the bottom of the div nearby?". I could find exact code if you'd like but that should be enough to get you started.

The issue seems to relate to the plugin checking "How far down the div has been scrolled?" but not "how far down the window has been scrolled" if the div being scrolled takes up the whole window. Something like that.

[spokospace]

It's only bootstrap 3 css, I tried to add style display: table; to .scroll, .wrapper and .jscroll-added but unfortunately it doesn't work..

[spokospace]

Ok, I solved my problem.

In file jquery.scroll.min.js I changed: wrapAll ('<div class = "jscroll-inner" />')} to wrapAll ('<div class = "jscroll-inner clearfix" />')}

Now everything is working fine :)

[evandrodp]

+1.. thanks! clearfix solved