4 ms·

Don't use it. It's an antipattern and an awful meme.

by kachnuv_ocasek 11y ago

ajkjk 11y ago
Why's that?
- D-Coder 11y ago
  Infinite scroll breaks text search. :-(
- currysausage 11y ago
  Pages become so complex that browsers start lagging. If you click a link on the infinitely scrolling page and then come back, your position is lost and you have to scroll down the whole way again (see Facebook, Twitter).
- kmfrk 11y ago
  It is extremely rare that it doesn't bring my browser to its knees after a certain amount of scrolling. (This is with 12 GB on Chrome.) You will also end up losing your reading position after a browser restart or on iOS where Mobile Safari reloads a page to save memory. It's a dumb, pointless feature that at the very least shouldn't be the default option. I'm sure there are hypothetical scenarios that may or may not warrant it, but it is a pain and a half for the user. Tumblr blogs have it in spades, and it's a miserable experience to browse.
  - Guest91283 11y ago
    I don't understand why more sites don't just use pagination with larger result sets. Return pages with 100 or 200 results each. It takes a little more bandwidth, but it's a good middle ground between pagination and infinite scroll.
    - kmfrk 11y ago
      Not to mention that people still use that one terrible loading-animation icon that looks like crap, because they didn't configure the CSS properties correctly.[^1] [^1]: https://jsfiddle.net/76FSM/17/ https://jsfiddle.net/76FSM/17/
  - ldjb 11y ago
    There are probably things the web developer can do to minimise memory consumption, though there isn't an obvious solution. That said, the problem of losing your reading position can be solved using something like history.replaceState(). As the user scrolls, update the history entry with a reference to the current reading location. Then, when the browser restarts, the website can know where the user was previously at and can return them to that location. This is the approach Discourse uses [1]. Alternatively, I suppose cookies could be used, but that's a slightly messier solution, imo. Unfortunately, I haven't seen many websites adopt such a feature. Which is a shame because infinite scroll can make for a great user experience -- if done right. But too many websites actually suffer as a result of poorly implemented infinite scroll. [1] https://eviltrout.com/2013/02/16/infinite-scrolling-that-works.html https://eviltrout.com/2013/02/16/infinite-scrolling-that-wor...
    - codedokode 11y ago
      > Alternatively, I suppose cookies could be used, but that's a slightly messier solution, imo. Cookies are shared between tabs. You should use URL or builtin browser capabilities (remembering scroll position on a page) for this purpose. Infinite scroll has other UX problems. For example, you cannot see the footer of a page or cannot navigate to the items by page number. As there is no page numbers you cannot even remember how to find some item.
      - ldjb 11y ago
        Not necessarily. Though it's true that many implementations have these problems, they're not inherent to infinite scroll. Regarding footers, who's to say the footer needs to go beneath the infinite scroll area? You could instead place the contents of the footer in a sidebar that stays in a fixed position. Alternatively the footer could be overlayed at the bottom of the page so it is always visible (a recent design trend would have it hide when the user scrolls down, but reappear when the user scrolls up). As for page numbers, there's nothing stopping you from adding them. Each item should probably have some sort of permalink to allow you access it directly, and there should be suitable navigation to allow you to find individual items. I find it quite sad that infinite scroll gets a bad rap due to poorly designed implementations. Perhaps it will get a better reputation if more websites actually put some thought into how infinite scroll is used.
- Scirra_Tom 11y ago
  I can't stand trying to click a footer link but it keeps loading more content. If you use infinite scroll, don't put anything underneath it.
- Groxx 11y ago
  OTOH: - usually breaks the back button (e.g. scroll to the 20th page, click something, go back. welcome to page 1!) - usually breaks links (how do you show someone things-on-page-10?) (fixable by tweaking the URL as you go, but nothing is really consistent + predictable by non-technical users) - usually performs hideously on low-power machines (e.g. mobile) due to memory growth (there are techniques, but few use them). can even tank powerful machines in time. - footers. headers. etc.
  - Viper007Bond 11y ago
    > usually breaks the back button (e.g. scroll to the 20th page, click something, go back. welcome to page 1!) This is easily overcome by pushState or what have you. As you scroll, the URL in the address bar changes to like `/page/20/` and then going back takes you to that URL where only the results from page 20 are displayed.
    - Groxx 11y ago
      This works fairly well in a lot of cases, and I definitely prefer it over page 1. But if you do that, you can't scroll up to see page 19 - you didn't really go back, you were just brought to a one-time page to see that thing you looked at most recently in a massive list. What if you were comparing things on page 17 and 20? Another approach is with "virtual scrolling", by preserving space for the items above and loading whatever you scroll to - I've seen that once (I forget where) and it was really nice. They didn't tackle the linkability problem tho, and had other issues. But all of this is fairly complex, and very few sites (or apps!) actually do so. Which is part of the problem.
amelius 11y ago
> Don't use it. It's an antipattern and an awful meme. I sometimes hate it (e.g. in facebook because it bluntly breaks the scrollbar), but at other times I miss it (e.g. in gmail).
- MichaelGG 11y ago
  Even Twitter, for instance, with their hundreds of engineers can't get it right. Login, scroll, read, click something, maybe it navs, maybe it opens a modal. Sooner or later I end up reloading the page and completely losing my place. I dont bother anymore.
  - M2Ys4U 11y ago
    Sometimes doing _any_ sort of action will jump to the top of the feed. It doesn't happen as often on web as it does in their app but occasionally it will.
  - clay_to_n 11y ago
    Yet the somehow got it right on their iOS app (that top left back button actually works as you'd expect). Amazing how nice it is on the phone, but how broken it is (because of modal inconsistencies, the way you'll eventually have to press your browser back button) on the web version.
    - username3 11y ago
      Open in new tab
hisyam 11y ago
I love inifinite scrolling in Pinterest but hate it in an ecommerce site with more than 200 items on a page.
azazqadir 11y ago
Infinite scroll is fine on some websites, like Reddit, Image galleries or Medium.
wscott 11y ago
How about something like photos.google.com? They have infinite(well, all history) scroll, but it is done perfectly. The scrollbar size doesn't change and you are given enough feedback to scroll directly to the part you want. Similar is google maps. If you make it a large canvas where the missing data is paged in then it becomes quite natural.

Don't use it. It's an antipattern and an awful meme.

ajkjk 11y ago

Why's that?

D-Coder 11y ago
Infinite scroll breaks text search. :-(
currysausage 11y ago
Pages become so complex that browsers start lagging. If you click a link on the infinitely scrolling page and then come back, your position is lost and you have to scroll down the whole way again (see Facebook, Twitter).
kmfrk 11y ago
It is extremely rare that it doesn't bring my browser to its knees after a certain amount of scrolling. (This is with 12 GB on Chrome.) You will also end up losing your reading position after a browser restart or on iOS where Mobile Safari reloads a page to save memory. It's a dumb, pointless feature that at the very least shouldn't be the default option. I'm sure there are hypothetical scenarios that may or may not warrant it, but it is a pain and a half for the user. Tumblr blogs have it in spades, and it's a miserable experience to browse.
- Guest91283 11y ago
  I don't understand why more sites don't just use pagination with larger result sets. Return pages with 100 or 200 results each. It takes a little more bandwidth, but it's a good middle ground between pagination and infinite scroll.
  - kmfrk 11y ago
    Not to mention that people still use that one terrible loading-animation icon that looks like crap, because they didn't configure the CSS properties correctly.[^1] [^1]: https://jsfiddle.net/76FSM/17/ https://jsfiddle.net/76FSM/17/
- ldjb 11y ago
  There are probably things the web developer can do to minimise memory consumption, though there isn't an obvious solution. That said, the problem of losing your reading position can be solved using something like history.replaceState(). As the user scrolls, update the history entry with a reference to the current reading location. Then, when the browser restarts, the website can know where the user was previously at and can return them to that location. This is the approach Discourse uses [1]. Alternatively, I suppose cookies could be used, but that's a slightly messier solution, imo. Unfortunately, I haven't seen many websites adopt such a feature. Which is a shame because infinite scroll can make for a great user experience -- if done right. But too many websites actually suffer as a result of poorly implemented infinite scroll. [1] https://eviltrout.com/2013/02/16/infinite-scrolling-that-works.html https://eviltrout.com/2013/02/16/infinite-scrolling-that-wor...
  - codedokode 11y ago
    > Alternatively, I suppose cookies could be used, but that's a slightly messier solution, imo. Cookies are shared between tabs. You should use URL or builtin browser capabilities (remembering scroll position on a page) for this purpose. Infinite scroll has other UX problems. For example, you cannot see the footer of a page or cannot navigate to the items by page number. As there is no page numbers you cannot even remember how to find some item.
    - ldjb 11y ago
      Not necessarily. Though it's true that many implementations have these problems, they're not inherent to infinite scroll. Regarding footers, who's to say the footer needs to go beneath the infinite scroll area? You could instead place the contents of the footer in a sidebar that stays in a fixed position. Alternatively the footer could be overlayed at the bottom of the page so it is always visible (a recent design trend would have it hide when the user scrolls down, but reappear when the user scrolls up). As for page numbers, there's nothing stopping you from adding them. Each item should probably have some sort of permalink to allow you access it directly, and there should be suitable navigation to allow you to find individual items. I find it quite sad that infinite scroll gets a bad rap due to poorly designed implementations. Perhaps it will get a better reputation if more websites actually put some thought into how infinite scroll is used.
Scirra_Tom 11y ago
I can't stand trying to click a footer link but it keeps loading more content. If you use infinite scroll, don't put anything underneath it.
Groxx 11y ago
OTOH: - usually breaks the back button (e.g. scroll to the 20th page, click something, go back. welcome to page 1!) - usually breaks links (how do you show someone things-on-page-10?) (fixable by tweaking the URL as you go, but nothing is really consistent + predictable by non-technical users) - usually performs hideously on low-power machines (e.g. mobile) due to memory growth (there are techniques, but few use them). can even tank powerful machines in time. - footers. headers. etc.
- Viper007Bond 11y ago
  > usually breaks the back button (e.g. scroll to the 20th page, click something, go back. welcome to page 1!) This is easily overcome by pushState or what have you. As you scroll, the URL in the address bar changes to like `/page/20/` and then going back takes you to that URL where only the results from page 20 are displayed.
  - Groxx 11y ago
    This works fairly well in a lot of cases, and I definitely prefer it over page 1. But if you do that, you can't scroll up to see page 19 - you didn't really go back, you were just brought to a one-time page to see that thing you looked at most recently in a massive list. What if you were comparing things on page 17 and 20? Another approach is with "virtual scrolling", by preserving space for the items above and loading whatever you scroll to - I've seen that once (I forget where) and it was really nice. They didn't tackle the linkability problem tho, and had other issues. But all of this is fairly complex, and very few sites (or apps!) actually do so. Which is part of the problem.

amelius 11y ago

> Don't use it. It's an antipattern and an awful meme. I sometimes hate it (e.g. in facebook because it bluntly breaks the scrollbar), but at other times I miss it (e.g. in gmail).

MichaelGG 11y ago
Even Twitter, for instance, with their hundreds of engineers can't get it right. Login, scroll, read, click something, maybe it navs, maybe it opens a modal. Sooner or later I end up reloading the page and completely losing my place. I dont bother anymore.
- M2Ys4U 11y ago
  Sometimes doing _any_ sort of action will jump to the top of the feed. It doesn't happen as often on web as it does in their app but occasionally it will.
- clay_to_n 11y ago
  Yet the somehow got it right on their iOS app (that top left back button actually works as you'd expect). Amazing how nice it is on the phone, but how broken it is (because of modal inconsistencies, the way you'll eventually have to press your browser back button) on the web version.
  - username3 11y ago
    Open in new tab

hisyam 11y ago

I love inifinite scrolling in Pinterest but hate it in an ecommerce site with more than 200 items on a page.

azazqadir 11y ago

Infinite scroll is fine on some websites, like Reddit, Image galleries or Medium.

wscott 11y ago

How about something like photos.google.com? They have infinite(well, all history) scroll, but it is done perfectly. The scrollbar size doesn't change and you are given enough feedback to scroll directly to the part you want. Similar is google maps. If you make it a large canvas where the missing data is paged in then it becomes quite natural.