joehewitt / scrollability Goto Github PK
View Code? Open in Web Editor NEWImitates iOS native scrolling in JavaScript.
Home Page: http://joehewitt.github.com/scrollability
License: Other
Imitates iOS native scrolling in JavaScript.
Home Page: http://joehewitt.github.com/scrollability
License: Other
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.
//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'.
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.
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 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 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.
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.
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).
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.
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
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.
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.
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.
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 ...
in an older version of scrollability there was a method to scrollToTop. how would one do that now?
thanks,
nick
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.
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.
Hello.
I use scrollability and jQuery mobile for positioned my elements like this :
var position = event.position * -1;
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.
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
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!
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.
//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'.
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.
When you use select inputs in the scrollable area you are unable to change them.
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/
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.
It sais that no dependencies inbvolved, but it looks like you are using require.js as export and requre methods are called.
We should be able to alloc/dealloc scrollability behavior on demand.
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?
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.