joehewitt / scrollability Goto Github PK

I believe the wrapper should adhere to standards.

If you set your navigation-bar/tab-bar to fixed they become absolute positioned elements in Mobile Devices.

then if you set your content area to overflow-y: auto; you now have a vertical scroller inside of a desktop browser..

I think scrollablity should take advantage of this knowledge unless you decide to develop addition features that aren't currently supported in Desktop browsers.

There is a bug if you add more than 9 pages, when you move to the 10th page it jumps to the 11th page, causing the whole thing to break eventually.

You can easily replicate this if you simply add more colors to the demo here: http://joehewitt.github.com/scrollability/example2.html

Try increasing the array of colors to 12.

I’m trying to debug the source, I’ll post here if I can find anything.

When adding form elements on the list, and navigating through them with the Previous/Next buttons on the iPhone keyboard, the Scroller loses track of where it is.

This leads to the user not being able to scroll up to the top, and if the user scrolls down to the bottom there will be a large chunk of whitespace area.

Hello.
I use scrollability and jQuery mobile for positioned my elements like this :

var position = event.position * -1;

$('.actuB').animate({left : -$('.actuB').width() * 3 + position * 1.75, leaveTransforms:true }, 0);

When I scroll, the left absolute position change. Ok, good, but if I take off my finger, the iPad continue to scrolling alone but the event.position don't change.

I need to desable the "swipe" or continue to know my pixel top position when the iPad continue to scroll.

Thank you I'm at your services if you need more informations.

Due to the nature of what I assume is a simulation of a native experience I'm not even sure this can be worked around, but I thought I'd bring it up (and be one of those guys filing an issue / gripe at the very beginning). But I digress.

I'm pretty used to tapping the time at the very top of the iPhone to get a long scrolling view to auto-scroll all the way back up. I won't presume to know how this works but in the case there's a solution to it, I'll throw this out there as a feature many would love to have back.

Regardless - Joe thanks for the great work.

I have read some said that scrolling is improved in iOS 5 with -webkit-overflow-scrolling: touch

I am wondering if my target platform is iOS 5 will I need to use scrollability or there is some feature on scrollability that is very much still relevant?

When you open the horizontal scrolling demo in portrait mode then rotate your iPhone by 90 degrees into landscape mode and back again, the position where the scrolling stops is too far to the right.

A similar problem appears when you open the demo while in landscape mode and then go to portrait mode.

The table scrolling demo works fine in both cases.

//It seems scrollability hasn't been updated in a while, if you are using dropkick and jquery //this is what I had to do, edit on your scrollability.js file the following:

//Replace:
require.ready(function() {
document.addEventListener(isTouch ? 'touchstart' : 'mousedown', onTouchStart, false);
window.addEventListener('load', onLoad, false);
});

//For this:

$(document).ready(function(){
document.addEventListener(isTouch ? 'touchstart' : 'mousedown', onTouchStart, false);
window.addEventListener('load', onLoad, false);
});

and comment out line 77, 79 and 84 that start with 'export'.

It would be usefull to have some event triggered when scrollbar / touchTargets initialization ends, so that we could handle some loading popup for huge lists.

Playing with a 500+ list, it seems content update is not well supported (i get stroboscopic jumps if i build my list later).
This is usually handled with some kind of refresh() method/event that can be called/triggered.

Seems like scrollability might trigger a click event twice on an element, it is not triggered always twice but it does happen. Will try to put an example soon.

[edit] This is evident when putting a checkbox inside a scrollable element, it'll uncheck and check itself back when click once most of the time.

[edit #2] I should note I'm also using Zepto.js and Spine.js

here we go ...

issues

1. looks like all of the examples are pointing to scrollability.min.js which isn't even checked in. (my way around this is to download the scrollability.min.js file from your example site however it's minified so i can't find the unminified version of that js anywhere. :-/
2. scrollability.js in master has two bugs in it based around the 'export' and 'require' variables don't exist. this kind of defeats "the whole drop in this script and stuff just works" paradigm

question

in an older version of scrollability there was a method to scrollToTop. how would one do that now?

thanks,
nick

Hey Joe,

I was testing scrollability on my iPad 2 and Safari (your table example) - it seems to get stuck eventually when playing with it and will no longer scroll, even though i can see the transform:translate3d property changing..Have you or anyone seen this issue?

Thanks

In my example here: http://aaroninfidel.github.com/Anion/examples/scrollability-example.html

the iPad version doesn't show scrollbars.

but, in iPhone it does.

We should be able to alloc/dealloc scrollability behavior on demand.

As the title suggests, is this intentional?

Btw the horizontal scrolling demo seems to work (even though it also scroll a little bit vertically, showing the browser grey background).

sorry if this may seems a stupid question is it possible to convert zen scroll to a user script, in order to get an overall smoother scroll for every page, i d like to use it in kiwi browser for android wich supports UserScripts
thanks.

I am facing a problem with my Custom jQuery build Popups. I am using the "scrollability.js" to the div “content” of my popup. The 1st popup gets the scroll. But the 2nd Popup does not. When I browse it in iPad, using a “weinre” remote debugging tool, it seems that it has got the class “.scrollable”. But there’s no scroll applied. Another thing, I noticed is that when I change the orientation from landscape to portrait & vice versa with my popup open. The popup gets the scroll. Can u please put a light on this..?? Like where I am exactly going wrong?? Thanks in advance.

It would be great to delay pictures loading (like 500+ facebook friend list avatars).

Like : http://www.appelsiini.net/projects/lazyload
Some more information for webkit : http://www.martinilab.com/blog/243/webkit-bug-with-lazy-load-plug-in/

I need to create a virtual list. For this I need to keep track of scrollTop, so that I can add/ remove elements.

Could you suggest if scrollability can provide me that ?

Thanks,
Kanwaljeet

Hi,

Is there a way to make the scrollable div scroll to a certain position and/or page? E.g. for a menu to scroll to a certain page.
I tried to animate the webkit-transform property but it didn't work. I also looked at the full source but didn't really get anywhere.
If you could point me in the right direction that would be great.

Thanks!

If you use UITableView as referance I'm missing the initial visibility of the scrollbar for orientation and context purpose. The user want to know how long (how many cells) and where in the TableView the user is located.

when onOrientationChange fires and the scroll wrapper changes size from the rotation, scrollability doesn't take this into account so you end up half way into another page.

In iOS 5 beta (and Safari 5.1 on desktop) -webkit-transform is taken into account for overflow, so will now cause the creation of overflow scrollbars, and will affect scrollHeight. This breaks Scrollability.

//It seems scrollability hasn't been updated in a while, if you are using dropkick and jquery //this is what I had to do, edit on your scrollability.js file the following:

//Replace:
require.ready(function() {
document.addEventListener(isTouch ? 'touchstart' : 'mousedown', onTouchStart, false);
window.addEventListener('load', onLoad, false);
});

//For this:

$(document).ready(function(){
document.addEventListener(isTouch ? 'touchstart' : 'mousedown', onTouchStart, false);
window.addEventListener('load', onLoad, false);
});

and comment out line 77, 79 and 84 that start with 'export'.

It sais that no dependencies inbvolved, but it looks like you are using require.js as export and requre methods are called.

There is some strange delay in Chrome when animation should start. It usually happens after touchend\mouseup.

Please, see the code http://jsfiddle.net/vX3r3/

if I have a scrollable list and remove items from it via the DOM using a search field for example,

on the current list where there is still space to scroll, it plays very nice.

but, if your in an area (far down the list) where the content then disappears because your search results become more precise there is no way to scroll back up because your past the scroll view.

It seems to decelerate too fast at the start and then not fast enough about halfway through, at least compared with how the native UIScrollViews "feel". Not sure how to describe that better.

When you use select inputs in the scrollable area you are unable to change them.

Playing with a long list (500+) facebook friends list with pics & buttons on each li.

The scroll feeling is only perfect when i have first scrolled down entirely. Before that i have some rectangles that render a bit late.
Maybe (with an option) it could be possible to "pre-load / pre-scroll the list", displaying some kind of opaque loading msg over it.