5 ms·

Joe Hewitt’s First Post-Facebook Web Gift: Inertial Scrolling For All

45 points by sahillavingia 15y ago

drivebyacct2 15y ago
This has already been covered here and only works in iOS whereas other solutions have worked on more platforms...
- cefstat 15y ago
  Would it be possible to mention some of these other solutions?
- masklinn 15y ago
  > only works in iOS For now, he's still planning on extending it to Android when he's done with iOS. > whereas other solutions have worked on more platforms... What other solutions?
- joehewitt 15y ago
  It will work on Android as soon as I get some Android devices to test with. It should currently "work" on Android, but probably not well.
  - snitko 15y ago
    I tried it on a Honeycomb tablet, works pretty smoothly, but "not for ios5" notification shows up for some reason.
hpaavola 15y ago
I don't get this. From http://joehewitt.github.com/scrollability/ http://joehewitt.github.com/scrollability/: "Native scrolling for mobile web apps... or at least the closest thing to it!" How does my Android phone lack "native scrolling" and what does that mean?
- ZeroGravitas 15y ago
  On iPhone, scrolling in an app, and a web page/app, are different in terms of speed and inertia. There's been several attempts to emulate the "native" scroll response via javascript so that web apps can more seamlessly replace alternatives.
  - nupark2 15y ago
    > ... so that web apps can more seamlessly replace alternatives. One native feature down (at least until Apple evolves it again), countless pile of more features to go. This is a losing battle.
- masklinn 15y ago
  1. It's for web applications, with all that implies: the ability to scroll only sections on the screen (not the whole page) while still having the right physics, lazy loading, snapping (the horizontal demo implements "snapping" transitions similar to iOS's springboard) 2. It implements iOS's UITableView physics, which are different (smoother) than Safari's native
  - hpaavola 15y ago
    So by "Native scrolling for mobile web apps" he means better scrolling of iOS Safari in general and especially for elements that have overflow:scroll styling.
    - masklinn 15y ago
      > So by "Native scrolling for mobile web apps" he means better scrolling of iOS Safari Well he means what he says: scrolling which looks and feels like native (UITableView) scrolling.
kyleslattery 15y ago
Joe's photoblog, mentioned in the article as an example of inertial scrolling: http://uponahill.com http://uponahill.com.
- lobster_johnson 15y ago
  Not sure why he calls it inertial scrolling. There's no "inertia" here. It's just pinning the background image as long as you are scrolling the text. Which, incidentally, is a pretty stupid idea. Look at his photoblog -- to scroll past a photo which has a very short text block, you have to scroll until little text block disappears off the page. It's pretty silly, and goes against the idea of the purpose of scrolling, which is to navigate past information that does not fit within the viewable area of your device/window. For a truly innovative scrolling concept, take a look at http://bloom.io/ http://bloom.io/. (Give it some time to load all its assets. The effect isn't activated until it has everything.)
  - antimatter15 15y ago
    Its for iPad/iPhone. The "for all" is a pretty blatant lie.
    - innes 15y ago
      The article is by MG Siegler.
  - statictype 15y ago
    Whatever. I thought the pinning effect was clever. It lets me browse through photos in a natural way by using the scroll wheel and easily read the captions too.
  - joehewitt 15y ago
    The goal here is not to be "truly innovative", but to emulate scrolling behavior which should ideally be performed by mobile WebKit, but isn't. But I must have done a good job since you only notice the background image being pinned, and not the fact that (at least on an iPad) the entire page is being scrolled with JavaScript. Also, try scrolling horizontally.
smickie 15y ago
This is how overflow:scroll should have worked on iOS a long time ago. At the moment you have to mash two fingers in a webpage and scrape the content across that page. (Not sure if this is updated in iOS5?)
- antimatter15 15y ago
  It is. Overflow:scroll works with one finger, but it's often very slow and laggy (like two finger) and has no inertial scroll. Maybe they'll fix it.
RobbieStats 15y ago
I've been using iScroll (http://cubiq.org/iscroll http://cubiq.org/iscroll) and it works quite well. Works on the desktop too unlike Scrollability.
- wolfhumble 15y ago
  The script has been superseded by iScroll 4: http://cubiq.org/iscroll-4 http://cubiq.org/iscroll-4
nupark2 15y ago
The animation is glitchy on an iPad 1, and it doesn't feel anything like the native UIScrollView's paging support. It's sort of acceptable enough for a web page, but it's not a replacement for a native UIScrollView.

45 points by sahillavingia 15y ago

drivebyacct2 15y ago

This has already been covered here and only works in iOS whereas other solutions have worked on more platforms...

cefstat 15y ago
Would it be possible to mention some of these other solutions?
masklinn 15y ago
> only works in iOS For now, he's still planning on extending it to Android when he's done with iOS. > whereas other solutions have worked on more platforms... What other solutions?
joehewitt 15y ago
It will work on Android as soon as I get some Android devices to test with. It should currently "work" on Android, but probably not well.
- snitko 15y ago
  I tried it on a Honeycomb tablet, works pretty smoothly, but "not for ios5" notification shows up for some reason.

hpaavola 15y ago

I don't get this. From http://joehewitt.github.com/scrollability/ http://joehewitt.github.com/scrollability/: "Native scrolling for mobile web apps... or at least the closest thing to it!" How does my Android phone lack "native scrolling" and what does that mean?

ZeroGravitas 15y ago
On iPhone, scrolling in an app, and a web page/app, are different in terms of speed and inertia. There's been several attempts to emulate the "native" scroll response via javascript so that web apps can more seamlessly replace alternatives.
- nupark2 15y ago
  > ... so that web apps can more seamlessly replace alternatives. One native feature down (at least until Apple evolves it again), countless pile of more features to go. This is a losing battle.
masklinn 15y ago
1. It's for web applications, with all that implies: the ability to scroll only sections on the screen (not the whole page) while still having the right physics, lazy loading, snapping (the horizontal demo implements "snapping" transitions similar to iOS's springboard) 2. It implements iOS's UITableView physics, which are different (smoother) than Safari's native
- hpaavola 15y ago
  So by "Native scrolling for mobile web apps" he means better scrolling of iOS Safari in general and especially for elements that have overflow:scroll styling.
  - masklinn 15y ago
    > So by "Native scrolling for mobile web apps" he means better scrolling of iOS Safari Well he means what he says: scrolling which looks and feels like native (UITableView) scrolling.

kyleslattery 15y ago

Joe's photoblog, mentioned in the article as an example of inertial scrolling: http://uponahill.com http://uponahill.com.

lobster_johnson 15y ago
Not sure why he calls it inertial scrolling. There's no "inertia" here. It's just pinning the background image as long as you are scrolling the text. Which, incidentally, is a pretty stupid idea. Look at his photoblog -- to scroll past a photo which has a very short text block, you have to scroll until little text block disappears off the page. It's pretty silly, and goes against the idea of the purpose of scrolling, which is to navigate past information that does not fit within the viewable area of your device/window. For a truly innovative scrolling concept, take a look at http://bloom.io/ http://bloom.io/. (Give it some time to load all its assets. The effect isn't activated until it has everything.)
- antimatter15 15y ago
  Its for iPad/iPhone. The "for all" is a pretty blatant lie.
  - innes 15y ago
    The article is by MG Siegler.
- statictype 15y ago
  Whatever. I thought the pinning effect was clever. It lets me browse through photos in a natural way by using the scroll wheel and easily read the captions too.
- joehewitt 15y ago
  The goal here is not to be "truly innovative", but to emulate scrolling behavior which should ideally be performed by mobile WebKit, but isn't. But I must have done a good job since you only notice the background image being pinned, and not the fact that (at least on an iPad) the entire page is being scrolled with JavaScript. Also, try scrolling horizontally.

smickie 15y ago

This is how overflow:scroll should have worked on iOS a long time ago. At the moment you have to mash two fingers in a webpage and scrape the content across that page. (Not sure if this is updated in iOS5?)

antimatter15 15y ago
It is. Overflow:scroll works with one finger, but it's often very slow and laggy (like two finger) and has no inertial scroll. Maybe they'll fix it.

RobbieStats 15y ago

I've been using iScroll (http://cubiq.org/iscroll http://cubiq.org/iscroll) and it works quite well. Works on the desktop too unlike Scrollability.

wolfhumble 15y ago
The script has been superseded by iScroll 4: http://cubiq.org/iscroll-4 http://cubiq.org/iscroll-4

nupark2 15y ago

The animation is glitchy on an iPad 1, and it doesn't feel anything like the native UIScrollView's paging support. It's sort of acceptable enough for a web page, but it's not a replacement for a native UIScrollView.