Improving the "endless scrolling"
In 2011, it was very fashionable (in my opinion, this mod went on from Facebook) to do “endless scrolling” on my websites: this is when the user turns and turns the mouse wheel, and all new search results are loaded by Ajax at the bottom of the page, turning ordinary scrolling into endless and causing the first time user to experience "cognitive dissonance".
Also recently, I saw on this site an article in which the author expressed his dissatisfaction with the “endless scrolling” and called for the use of the good old “padzhination”.
I agree with the author. I myself am a drug addict, and sometimes I sit behind the monitor as enchanted, with glass eyes, twist-twist-twist the magic wheel, unable to go on business / to work / to the store / eat / drink / to the toilet, and I twist it with with a single thought: “Well, when will you all end already ?!” (what can you do - I used to bring things to the end).
One morning I got up and firmly decided: “Enough of this!”
')
I present to you my small script , which I recently wrote for my “social network” (with blackjack and whores).
To view the demo, download the archive , and run the file "test / test.html".
What innovations does this script offer:
Since they turned the main scrollbar into something incomprehensible, we need to return the normal scrollbar, which we did by drawing a gray bar on the right side of the page, immediately to the left of the usual scrollbar.
What this strip has reached from the top is how many sample results we’ve already scrolled through. In general, this strip is black. Where it is gray is the place in the entire sample where we are now.
Please also note that the page address changes during scrolling. Thus, you can browse half this evening, add a page to your bookmarks, turn off the computer, go to sleep, wake up in the morning, turn on the computer, go to the page you added to your bookmarks yesterday before going to sleep, and continue flipping from the very place where you have stopped. And, moreover, you can browse from this place not only forward, but also back.
And about navigation to any desired page: you can get to any page here - just substitute the number of the selection page you need into the web page address. Since comprehensible urls are now the standard, this should be a good solution.
This script, obviously, is not something carved into granite, and I, having risen this morning, rewrote its half. Nevertheless, the performance seems to be stable, and tested in recent versions of Chrome and FireFox. I’ll say right away: I’m not chasing “cross-browser compatibility” - it will always be possible to finish it if someone wants to use this script on their “cross-browser” website.
It seems like everything, the demo speaks for itself. Post provokes comments.
What else can be done (based on comments):
When you click anywhere on the bar, go to the corresponding sample page.
Remove data pages from the top of the web page, when the data on the web page becomes too much (so as not to slow down).
Examples of improved “endless scrolling”:
demo.lanmediaservice.com/video/#/catalog/page/4
search.rsl.ru
Also recently, I saw on this site an article in which the author expressed his dissatisfaction with the “endless scrolling” and called for the use of the good old “padzhination”.
I agree with the author. I myself am a drug addict, and sometimes I sit behind the monitor as enchanted, with glass eyes, twist-twist-twist the magic wheel, unable to go on business / to work / to the store / eat / drink / to the toilet, and I twist it with with a single thought: “Well, when will you all end already ?!” (what can you do - I used to bring things to the end).
One morning I got up and firmly decided: “Enough of this!”
')
I present to you my small script , which I recently wrote for my “social network” (with blackjack and whores).
To view the demo, download the archive , and run the file "test / test.html".
What innovations does this script offer:
Since they turned the main scrollbar into something incomprehensible, we need to return the normal scrollbar, which we did by drawing a gray bar on the right side of the page, immediately to the left of the usual scrollbar.
What this strip has reached from the top is how many sample results we’ve already scrolled through. In general, this strip is black. Where it is gray is the place in the entire sample where we are now.
Please also note that the page address changes during scrolling. Thus, you can browse half this evening, add a page to your bookmarks, turn off the computer, go to sleep, wake up in the morning, turn on the computer, go to the page you added to your bookmarks yesterday before going to sleep, and continue flipping from the very place where you have stopped. And, moreover, you can browse from this place not only forward, but also back.
And about navigation to any desired page: you can get to any page here - just substitute the number of the selection page you need into the web page address. Since comprehensible urls are now the standard, this should be a good solution.
This script, obviously, is not something carved into granite, and I, having risen this morning, rewrote its half. Nevertheless, the performance seems to be stable, and tested in recent versions of Chrome and FireFox. I’ll say right away: I’m not chasing “cross-browser compatibility” - it will always be possible to finish it if someone wants to use this script on their “cross-browser” website.
It seems like everything, the demo speaks for itself. Post provokes comments.
What else can be done (based on comments):
When you click anywhere on the bar, go to the corresponding sample page.
Remove data pages from the top of the web page, when the data on the web page becomes too much (so as not to slow down).
Examples of improved “endless scrolling”:
demo.lanmediaservice.com/video/#/catalog/page/4
search.rsl.ru
Source: https://habr.com/ru/post/143574/
All Articles