Fix scrolling when using -webkit-overflow-scrolling:touch;

[KZeni]

This is a great plugin, but I want my mobile visitors to still get the smooth scrolling that -webkit-overflow-scrolling:touch; provides. I applied that to the scrolling element's CSS, but it then made the headers not update properly and generally became glitchy.

I found that a quick fix to this was to have this set the headers to be position:fixed; rather than position:absolute;. The scrolling is now perfectly smooth and the headers still attach themselves as you'd expect.

I'd like to see this implemented in the main distribution of this since I'm sure other people will want to have sticky headers and smooth scrolling.

Thanks!

[iclanzan]

I will review this as soon as I have some spare time. I remember there being no way of making it work with -webkit-overflow-scrolling: touch when I built this, but I think things have changed with iOS 8.

[iclanzan]

I don’t think position fixed is a good work around though.

[KZeni]

Based on the multiple things I've tried, this seems to be the only thing that addresses the issue and it's a small change. What makes it not a good workaround?

My thinking is, those elements are effectively position:fixed; when you consider their behavior, and setting it as such actually addresses a problem that's otherwise present when using smooth scrolling (smooth scrolling is very much desired in my case).

If it's a matter of browser compliance, then I'd consider adding this small change as an option that's set when you call the script (ex. $('main').slinky({position:'fixed'});) and let the developers out there determine if they're targeting devices that have issues with position:fixed;.

Edit: Come to think of it, I can see how setting it to be position:fixed; would break it out of the container for when you want to size it to fit that constraint, and that could be less than ideal for some people's layouts. That said, you might find that "some people" is a sign to consider making it an option.

I'd love to hear your thoughts.