Is there any javascript code or any other way to convert infinite scroll into pagination on facebook or any other website.
Or is there any way to load more results while scrolling using javascript ?
Infinite scroll is easy to develop. But infinite scroll only appends contents. Therefore, if contents are long, scrolling is so slow and the browser is blocked.
If you consider long contents and high performance, I recommended eg.infiniteGrid.
eg.infiniteGrid keeps a number of DOMs when scrolling.
If a user scrolls down, eg.infiniteGrid remove top DOMs. If a user scrolls up, eg.infiniteGrid remove bottom DOMs.
Therefore, eg.infiniteGrid has high performance.
Checks out this video: eg.infiniteGrid benchmark: append item performance
There are a few Javascript/jQuery plugins you can use to implement infinite scrolling on your website. One of them you could check out is jScroll (http://jscroll.com/).
If you're loading paginated content from Facebook or another API, you could use the callback method in jScroll to make a request to fetch each page of data.
Related
Context
I am creating a site where there are sections stacked in rows, and each row takes up the full viewport.
I don't want the site to be scrollable normally, and would instead like the site to "snap" to the bottom of each section, so that I can then play out the animations taking up the full view port.
Issue
I took the approach of listening to scroll events, and then triggering a nextsection.ScrollIntoView when the user had scrolled far enough to snap to the next view.
This doesn't work well though, as the ScrollIntoView is interupted by user scroll activity, including the latent scrolling of the mouse that hangs around for about 300ms after you've scrolled.
I managed to get it sort of working by using a setTimeout(scrollIntoView(), 400), but this takes too much time and relies on the user not interacting with the site after scrolling.
I made a CodePen (here) showing the type of setup I'm working with, however to see the issue you need to open it as a webpage itself, as CodePen doesn't perform a smooth animation when using ScrollIntoView and just jumps there.
I need a smooth and uninterruptable animation as the site switches from one section to another, but as of yet I've found no working ways to implement this.
Thanks for any answers.
I need to implement infinite scrolling in a react app, while my data is huge and the use might keep on scrolling and scrolling for a long time.
All the infinite scrolling solutions that I've found only handle adding the data to the table whole scrolling. But I need to also remove data from the DOM to prevent the app from slowing due to tens of thousands of rows being potentially loaded after some time on the app (think social media feed).
I also don't want to keep all the data in the memory and I need to clean old data while scrolling (up and down).
So basically what I need to do:
Load the first 100 rows (1 page) to the page
When the user scrolls down and getting near the bottom, load next page and add to the bottom
When the page has a large amount of pages (lets say 5 page, or 500 rows) start to remove old pages from the top when the user keeps scrolling down
If the user start scrolling up, we need to reverse the functionality - Request the pages we removed again and add them to their place in the top
Does anyone know of such a solution?
Any recommendations on how to tackle this if I need to build from scratch?
Thanks!
1. Use react-infinite-scroll-component.
Follow instructions in documentation.
You can see basic example here. Here initially array have 20 elements and fetchMoreData function concatinate 20 more elements to it.
Basically you are concatinating, next elements in in array and adding them over, this is the concept of infinite-scroll.
For furthur references, link1, link2.
Or
2. You can implement you custom scrolling as well, like this
Is there an infinite content scrolling code that will scroll horizontally? It's also known as autopagerize, unpaginate, endless pages, endless scrolling, infinite pagination etc. It seems to be very popular on tumblr the blogging website and a lot of online news sources. However wasn't able to find one that will scroll horizontally. Example
Also is there a version that is similar to the tumblr one that doesn't tell you it's loading the next page?
The code would be exactly the same.
Just adjust your css so that the items are displayed horizontally instead of vertically.
I have a bunch of divs that i am removing from the document using javascript. When this is done, the length of the page is often shortened significantly, and if the user had scrolled down the page, it gets abruptly recentered because the entire page now fits on the window.
This causes the user to no longer have their mouse over the same buttons on the page. I'd like to prevent this auto scrolling, but it seems like it may be difficult. I admit that it doesn't make much sense to allow a page to be scrolled off of its contents. Seems like the best I could do is to leave dummy divs as placeholders. Once the user scrolls back up, then clean them up to shrink the page.
Are there other, cleaner solutions?
You could just set the divs to be removed to visibility: hidden (add a class or similar) so they still take up room in the document. At a suitable time you actually remove them and allow the document to reflow.
Here is what I am thinking:
I have long web page and when the user reaches the end, I don't want the scrolling to stop just then, but I want to reload the page again from the bottom and continue the scrolling.
Detailed
As the user scrolls to the bottom, I want the top of the website to be removed from the top and placed at the bottom in a smooth way and this effect has be vice versa also. I mean if user scrolls up at the top of the page, then the footer must load at the top and continue in this fashion.
Yes, Infinite Scroll can do this. There is also a jQuery plugin.
Now whether you should do this... that's an entirely different question. Personally I find this behaviour extremely annoying.