Dion Almaer was faster than me blogging about TouchScroll. Here is what you are waiting for – the “official” blog post about TouchScroll and the link to the repository.
Here it is: TouchScroll, our scrolling layer for WebKit Mobile. It is JavaScript/CSS 3 based and allows for fixed elements like headers and toolbars on web pages when viewed on the iPhone or on Android. It works on the iPad, too. Check out the demo (short URL: http://u.nu/8uvg8) to see it in action – it works in Desktop Safari (at least kind of) or WebKit Nightly (very good), but I recommend you have a look at it on your iPhone, iPad, or Android based device.
Motivation
While Safari Mobile features native scrolling, there are two reasons to re-implement scrolling with JavaScript: The original scrolling behavior is rather slow – we were looking for a solution that feels more fluid. And the viewport behavior of Mobile Safari and other mobile browsers using WebKit doesn’t allow for fixed positioned elements. It is optimized for document reading, not for building interfaces.
Our goal is to be able to deploy application interfaces to browsers of handheld devices that feel as familiar as possible for the user. TouchScroll enables developers to use fixed interface elements like headers and toolbars.
We also use PhoneGap a lot to deploy cross-platform applications onto smartphones, and we think that web based apps don’t need to feel like aliens for users. And we weren’t satisfied with existing solutions.
Usage
To add a scrolling capabilities to an element, that element must have a fixed size. Have a look at the demo for an elegant approach using display: -webkit-box.
HTML:
<div class="scroller"><!-- some great contents --></div>JavaScript:
var scrollNode = document.querySelector(".scroller"), options = {}; var scroller = new TouchScroll(scrollNode, options);
At the moment, the only known option is elastic. Use {elastic: true} as second parameter to add the bouncing effect to the scroller.
Get it!
TouchScroll is available on github. Feel free to fork it and send patches back. You can also get a minimized file that includes the css-bezier library that TouchScroll depends on.
How is it done?
TouchScroll uses a combination of JavaScript and CSS 3. All animations are done with CSS transitions – no JavaScript intervals.
The elasticity effect when crossing the scroller bounds is achieved by dividing the bezier curve (used as timing function) into two sub-curves using my (yet to be finished) CSS Bezier library for JavaScript.
Customization/Configuration
TouchScroll allows you to customize many aspects of the scrolling behaviour: Have a look at the config object at the top of the source file.
Customizable properties include bouncing behaviour and deceleration animation. Feel free to experiment. I know that scrolling is not as close to <insert device of choice> as possible. If you think you’ve found better values, just let me know.
Configurable properties include:
- Scrolling threshold: The minimum pixel amount needed to begin scrolling
- Flicking behavior: flicking threshold, friction, and deceleration animation.
- The elasticity/bouncing effect: factor and maximum bounce length.
- Snap back behavior: timing function and default duration.
Goodies
After instanciation, each TouchScroll scroller re-adapts to its contents after orientationchange and resize events on window as well as after DOMSubtreeModified events on the scroller itself. That means, the scroller adapts to content additions and deletions.
Limitations
TouchScroll is meant to be used with touch-based devices and also works well with a stylus (tested with a Wacom tablet). Don’t use it for desktop browsers and the like. Simply add overflow: auto to the scroller element for these cases. Zero-cost compatibility.
Hiding and Showing
If a scroller is instanciated with an layer that is not beeing displayed, it needs to be refreshed manually after making it visible. Simply use the setupScroller method.
Styling
TouchScroll inserts two more <div> elements to the outer scroller container, that wrao the prior contents. That means, that the outer scroller element must not have padding. The CSS child selector (a > b) won’t work any more after instancing TouchScroll on an element for the same reason.
Android
Android has several problems that need to be solved. If you have solutions, please keep in mind that TouchScroll should remain compatible with WebKit as found on Android 1.5 and send us a patch.
- When not preventing the default action of the initial touchstart event on Android, the following touchmove events queue up and fire just before the eventual touchend event. That makes scrolling impossible.Cancelling the touchstart event results in other problems: It prevents tapped elements from beeing focused or clicked. The current workaround – dispatching a synthesized click event – hides the focus rectangle and makes the focussing of form elements nearly impossible, which is even worse.That means: at the moment it is not possible to use TouchScroll in conjunction with forms on Android.I’d like to know whether there is a solution that eliminates the need to prevent the default action of touchstart.
- Due to the lack of hardware acceleration, the rendering performance on Android isn’t nearly as good as on the Apple’s devices. We already invested a lot of work to achieve good performance. If you can do better, send us a patch!
- Support for
-webkit-transform: matrix(…)is broken in Android < v2.0. That affects reading the computed style of elements. We already worked around that issue using a regex-based parsing function for those devices.
Other Devices
The browser of S60 devices is based on WebKit, too. However, apart from the fact that TouchScroll does not work on those devices, you should simply set the overflow style of the scroll container to overflow: auto for these devices and benefit from native scrolling. The same goes for Nokia WRT apps.
I’ve done a quick test on the Palm Pre. Unfortunately, TouchScroll does not work in the browser of webOS. Moreover, I’m not sure whether it actually makes sense in this particular browser, as its overlays would lie directly on top of fixed elements at the bottom. In webOS apps you should probably use the native scroller anyway. Maybe I’ll do a short tutorial on how to instanciate TouchScroll on iPhone/Android and the webOS scroller when deploying a cross platform app to all of those devices.
What other devices are relevant? Let us know!
To Do
The official to-do-list:
- Keep the scrollbars round while bouncing – I already know how to do this, so you can expect the solution in the next days.
- Add an option to completely switch off scrollbars.
- Find a solution to the event problems on Android – help greatly appreciated!
Pingback by Ajaxian » TouchScroll: Implementing scroll physics in JS and CSS — April 27, 2010 @ 6:03 pm
[...] Update: David has released TouchScroll on GitHub and blogged about it here. [...]
Comment by JS — April 27, 2010 @ 6:50 pm
Awesome work. I am currently working on a Dashboard-style application which uses a long widescreen-horizontal scrolling display, I’d love to know how I can integrate this for FF/Webkit browsers.
Jay
Comment by Matthias — April 28, 2010 @ 12:45 pm
Really looks great. Could be a fix to Grubers biggest concern: that WebKit scrolling is slow.
Do you have an explanation why native scrolling is slower that css transforms?
Comment by Nathan Borror — April 29, 2010 @ 1:02 am
I’ve been waiting for something like this and your implementation is close to native behavior. Why can’t you select text?
Comment by Nathan Borror — April 29, 2010 @ 1:05 am
I should clarify, why can’t you select text using the iPad? Looks like text selection works on the iPhone.
Comment by punkassjim — April 29, 2010 @ 2:30 am
This looks spectacular, and congratulations on your speedy recovery from being Fireballed!
One thing to consider putting in your “known issues” file: find a way to allow default behavior when a user taps-and-holds on a link. The native context menus don’t work right now. This seems to be an issue with several of the pseudo-fixed-positioning JavaScript solutions I’ve seen. I would imagine it’s possible to refrain from sending the preventDefaults() command if the touch event a) doesn’t travel more than the 5px threshold within b) the standard amount of time it takes to trigger the default context menu.
Comment by punkassjim — April 29, 2010 @ 3:05 am
I should also note, I’m on iPhone 4.0b2 and I can’t select text either.
Pingback by Resources for iPhone and iPad Development « Damon Clinkscales — April 29, 2010 @ 4:17 am
[...] TouchScroll: Scrolling Layer for WebKit Mobile [...]
Comment by formasfunction — April 29, 2010 @ 9:07 am
I believe the parameter {elasticity: true} should instead be {elastic: true} as per the demo.
Comment by David Aurelio — April 29, 2010 @ 9:29 am
@JS: that should work out of the box for webkit browsers. The scroller is not (yet) compatible with FF/Gecko, although it would be possible. You need to provide an implementation of WebKitCSSMatrix (a constructor available in WebKit) and add support for different vendor prefixes. Do you want to use TouchScroll for desktop browsers? I wouldn’t recommend that.
Comment by David Aurelio — April 29, 2010 @ 9:35 am
@Nathan, @punkassjim: Thank you for pointing out those issues! Maybe I’ll have to do more code forking. Initially, I wasn’t preventDefault()’ing most events on the iPhone, but had to add it to get things working on Android. So maybe this can be solved easily if I can distinguish Apple’s devices from Android. I will add the issues you’ve found to the list.
Comment by David Aurelio — April 29, 2010 @ 9:37 am
@formasfunction: You are right. I just corrected the text. Thank you.
Pingback by TouchScroll, a Scrolling Layer for WebKit Mobile « — April 29, 2010 @ 10:38 am
[...] Original source : http://uxebu.com/blog/2010/04/27/touchscroll-a-scr…; [...]
Comment by joscilene freitas — April 29, 2010 @ 3:49 pm
você e mesmo Deved ENTÃO VOCÊ UM MEGA INTELIGENTE !!!!!!!!!!!!!!!!!!!!!!!!!!! UM GRANDE ABRAÇO
Comment by Gerben — April 29, 2010 @ 7:27 pm
When you swipe your finger down, once you finger moves over the bottom toolbar its abruptly stops scrolling. While if you release your finger just before hitting the toolbar, it continues scrolling.
You probably cant detect touches outside the viewport, but when a touch leaves the bottom of the viewport, at a certain speed, you can assume the user want the scrolling to continue, like safari does by default.
Comment by Jeff — April 30, 2010 @ 2:08 am
Thanks David. This is great.
I have a question about how you did it. I am working on something similar, but am running into an issue. I’m using CSS transitions to scroll text on the iPad, but whenever I move the text (using CSS/translate) there’s a weird glitch in the beginning. Did you run into this, and if so, how did you overcome it?
Comment by order free magazines — April 30, 2010 @ 2:19 am
That was a superb article,You discover interesting things every day.
Pingback by links for 2010-04-29 // Aaron Gladders — April 30, 2010 @ 3:33 am
[...] TouchScroll, a scrolling layer for WebKit mobile « Uxebu.com – the Ajax and JavaScript Experts (tags: ipad iphone mac webkit js) Tags Categories delicious [...]
Pingback by links for 2010-04-29 « Mandarine — April 30, 2010 @ 6:06 am
[...] TouchScroll, a scrolling layer for WebKit mobile It is JavaScript/CSS 3 based and allows for fixed elements like headers and toolbars on web pages when viewed on the iPhone or on Android. It works on the iPad, too. (tags: android css3 ipad iphone jquery webdev) [...]
Comment by David Aurelio — April 30, 2010 @ 9:08 am
@Gerben: Thank you. I know that problem, just didn’t remember to add it to the list of known issues. Do you know a way to detect that case? I’ve tried to find a way of detecting the finger leaving the viewport, but didn’t succeed yet.
@Jeff I think I’m having a similar problem with TouchScroll – there is a short jump when scrolling down for the first time, before the contents outside the visible area are rendered (at least on the iPhone 3G). I’m not sure if it’s the same problem you are experiencing. You might also have to add “-webkit-transform-style: preserve-3d” to the element you are transforming. It solved many flickering problems for me.
Comment by Allen Pike — April 30, 2010 @ 9:39 am
You mentioned a dissatisfaction with existing solutions, which likely refers to the widely-used iScroll library (http://cubiq.org/scrolling-div-for-mobile-webkit-turns-3/16). Do you have any specific goals or features that are different from iScroll’s, or are you moreso dissatisfied with it at the code level? I’ve heard a few PhoneGap developers express discontent with iScroll, but to the extent I’ve played around with it I couldn’t determine what was wrong with it (other than that its scrollbars no longer shrink when bouncing.)
Comment by David Aurelio — April 30, 2010 @ 3:41 pm
Allen,
there is nothing “wrong” with iScroll – the reasons we wanted something different are:
1) iScroll is not compatible with Android. The successor library – ghosttouch – seems to be in a very early development stage, and the example didn’t work on Android, either.
2) I’m not sure about this one, but iScroll doesn’t seem to have that extra deceleration when flicking over the bounds.
3) There have been only few updates to iScroll/ghosttouch in the last time.
So, as long as you’re ok with iScroll, keep using it. There’s nothing wrong with it.
Comment by Erik Larsson — April 30, 2010 @ 4:36 pm
This looks very promising, will have a go at it this weekend. Was using jqextension until now but might reconsider.
I guess there’s no problem running it in fullscreen mode, using PhoneGap?
Congratulations!
Comment by Jeff — April 30, 2010 @ 8:04 pm
That totally solved it! Thank you David!!
Pingback by TouchScroll, a scrolling layer for WebKit mobile [update] « Uxebu … | Source code bank — April 30, 2010 @ 11:57 pm
[...] here: TouchScroll, a scrolling layer for WebKit mobile [update] « Uxebu … If you enjoyed this article please consider sharing [...]
Pingback by iPad Links: Friday, April 30, 2010 « Mike Cane's iPad Test — May 1, 2010 @ 1:01 am
[...] enough. Time to raise the bar: Interoperable Rise and fall of a UI convention: The search bubble TouchScroll, a scrolling layer for WebKit mobile HTML5 Extensibility What’s Wrong With [...]
Pingback by Antipode – Scrolling libraries for Mobile Safari — May 1, 2010 @ 8:44 pm
[...] Announcement blog post and GitHub page. Demo: iPhone and iPad. Minified Size: [...]
Comment by Adam — May 5, 2010 @ 2:27 pm
I’m in the early stages of app development and you have no idea how helpful this scrolling layer is going to be for my app. The demo is perfection for what I have been (unsuccessfully) trying to achieve myself. Thank you so much.
Comment by David Aurelio — May 6, 2010 @ 10:22 am
@Erik It has even less problems in fullscreen mode, because the event-absorbing bottom toolbar is missing. Regarding PhoneGap – *cough* – I have to admit I didn’t make a package yet. Should work flawlessly. If not, I will fix it, because we need it for a client project.
@Jeff, @Adam Thank you. I’m glad you like it. Don’t forget to report the issues you run into on github!
Comment by timpeti — May 6, 2010 @ 10:41 am
It seems you cannot have a div within a website using touchscroll while the rest of the page uses native scrolling, right?
Is it possible to have two nested touchscroll enabled divs independently scrollable?
Comment by David Aurelio — May 6, 2010 @ 10:57 am
@timpeti: That’s true at the moment, but I might consider re-organizing the event handling to make it possible if there are convincing use cases.
Nested TouchScrollers should be possible in theory, but I’ve never tried. Simply try it and let me know whether it works!
Comment by Tim — May 7, 2010 @ 8:58 pm
Is there a way to get event notification that a scroll has occurred within TouchScroll? Also, would need to get the absolute Y position of content being scrolled within the scroller. I’m trying to lazy load images within a list as user scrolls down w/ some pre-loading of the next n scroll window heights. I was doing this before by listening to the onscroll event on the document. I’m looking for a similar solution now that I have the content scrolling within TouchScroll. Any help would be appreciated.
Comment by Sy Naka — May 8, 2010 @ 6:01 pm
I must be missing something fundamental but how do I get 2 touchscroll enabled divs working? Is this right? Looking to implement it for ipad project.
HTML : 1st touchscroll div here 2nd touchscroll div here
CSS: #one{float: left; width 300px;} #two{float:right; width:300px;} + demo.css
Thanks muchly.
Comment by Sy Naka — May 8, 2010 @ 6:08 pm
http://cssdesk.com/sscwb
Comment by David Aurelio — May 9, 2010 @ 7:03 pm
@Tim: I will implement scroll events for TouchScroll – then you can simply use your existing solution.
@Sy Naka: Do you instantiate TouchScroll with both divs? The demo.css is not needed, you need the touchscroll.css and the js file.
Comment by Sy Naka — May 10, 2010 @ 1:09 am
Excuse my js ignorance but is this referring to this bit of code:
var scroller = new TouchScroll(document.querySelector(“.scroller”), {elastic: true});
Clearly this line then doesn’t instantiate all instances of the scroller div. I’d appreciate a simple example how to do this to 2 divs. Many thanks.
Pingback by Around the web | alexking.org — May 10, 2010 @ 4:02 am
[...] TouchScroll, a Scrolling Layer for WebKit Mobile – definitely something to check out. [...]
Comment by Sy Naka — May 10, 2010 @ 7:36 am
Thanks, worked it out. Just had to change/add the div class to the var scroller. Much appreciated again. Good work.
Comment by Neil — May 10, 2010 @ 8:07 am
This is a fantastic library. I’m using it with great success. In one part of my site the content changes dynamically, and I’d like the scroll position to jump back to the top. I can’t find a way to do this? How would you go about creating a “resetScrollTop” method?
Comment by David Aurelio — May 10, 2010 @ 8:54 am
@Sy Naka Glad it worked out. Thank you.
@Neil: At the moment you can use “scroller.scrollTo(0, 0)” – on the scroller instance, not on the div element. I tried to capture changes to the “scrollTop/scrollLeft” properties of the div itself, but failed using “__defineSetter__”.
@punkassjim: native context menus now work on the iPhone I’m testing with. I will push the changes to github and to the demo in an hour.
Comment by Tim — May 10, 2010 @ 6:19 pm
David – Thanks for agreeing to add the scroll event, I’ll keep an eye out for revisions.
Comment by Vernon — May 12, 2010 @ 9:32 am
This a pretty cool project, but when you compare TouchScroll’s reflex animation (dragging the page down and then letting go), TouchScroll seems to be using an ease-in while iPhone OS applications seem to be using an ease-out.
This gives the animation a really strange feel since generally the iPhone OS approach feels like the view is “snapping back,” while the TouchScroll approach doesn’t really seem to be mimicking any kind of physical phenomenon.
Just my two cents :).
Comment by Mike — May 19, 2010 @ 3:05 pm
Hey, I’m having a little bit of an issue with this, sometimes it will work fine, but other times the TouchScroll divs won’t work unless I rotate the iphone, then it will work fine!
Is there any documentation to make sure I’m initialising it all correcly?
Thanks!
Comment by Shivraj — May 21, 2010 @ 7:50 am
Hi,
I am using above mentioned framework for touch scroll implementation.
There is a prob i am facing. for Example if there is a jsp/html with a tag in the page, the scroll doesn’t seem to work.
Please help me out in this.
Thanks a ton in advance.
Shivraj
Comment by Shivraj — May 21, 2010 @ 7:52 am
Sorry for the previous post..the correct one is here.
Hi,
I am using above mentioned framework for touch scroll implementation.
There is a prob i am facing. for Example if there is a jsp/html with a tag in the page, the scroll doesn’t seem to work.
Please help me out in this.
Thanks a ton in advance.
Shivraj
Comment by Shivraj — May 21, 2010 @ 7:52 am
Hi,
I am using above mentioned framework for touch scroll implementation.
There is a prob i am facing. for Example if there is a jsp/html with a form tag in the page, the scroll doesn’t seem to work.
Please help me out in this.
Thanks a ton in advance.
Shivraj
Comment by David Aurelio — May 21, 2010 @ 9:05 am
@Vernon: The next release should have a better snap back animation. Thank you.
@Shivraj: I do experience some problems with forms inside scrollers. i’m trying to fix this with the next releases. This shouldn’t depend on JSP.
Comment by shivraj — May 22, 2010 @ 4:09 pm
Hi David,
Actually i faced one more issue. when i scroll tag has a form tag, it doesn’t allow me to enter any values for the textbox or text areas. There seems to a kind of mask that is applied on the scroll section.
But if through the js i can feed the values. i can do getElementById and do focus which is not possible through normal on the screen by click.
Thanks
Shivraj
Comment by Carsten — May 25, 2010 @ 12:41 pm
Hi David,
I’m in early stage of development and in your readme you say “Simply add overflow: auto to the scroller” for developing on, as in my case, desktop safari.
My problem is, that if I change the CSS to
.scroller {
…
overflow: auto;
…
}
Safari crashes on reloading the page >_<
Any ideas on this?
Cheers /Carsten
Comment by Carsten — May 25, 2010 @ 1:22 pm
Me again, some info on the topic. I can develop now as I have downloaded touchscroll.min.js again (new version?) and it works (sufficient) in safari.
But overflow:auto still crashes the browser.
Cheers /Carsten
Comment by Abraham — May 25, 2010 @ 10:52 pm
David,
I’m using phonegap and jqtouch for an app I’m developing, however when I declare your scroller my content is not visible. Any ideas?
Comment by David Aurelio — May 26, 2010 @ 8:22 am
@Shivraj: Thanks for reporting. I am currently experiencing a few problems with form elements within the scroller and hope I can fix them with the code rewrite I’m currently doing.
@Carsten: Sounds like a problem with “display: -webkit-box” I’ve stumbled upon: When the children of the box exceed a height of 100%, Desktop Safari crashes. If I remember correctly, the solution is to set the flexible sub-box to “height: 1px” (it will expand and take up the rest of the space anyway). This bug is fixed in WebKit Nightly btw.
@Abraham Does your scroller element have height? If it has, there has been a problem in a few situation with a specific version of touchscroll.css. Do you use the latest version? http://github.com/davidaurelio/TouchScroll/blob/master/src/touchscroll.css
Comment by Abraham — May 26, 2010 @ 2:47 pm
Me again, I did define a height and width. It is now displaying after updating to the latest css. Now I have another problem however; when I scroll the flick to scroll doesn’t work and the scrolling stops as soon as my finger stops touching the screen and the scrollbar remains visible on the device. If i use safari it is almost as if I were still clicking because any mouse movement scrolls up or down.
Any helps would be appreciated
Comment by David Aurelio — May 26, 2010 @ 3:39 pm
Abraham, could you put an example online or send it by e-mail?
Comment by petcory — May 27, 2010 @ 10:41 am
ALL DIRECTIONS SCROLLING BUG
Hi, i’v got a strange bug wich i don’t know how to reproduce, maybe you guys know?
I’v got a list (classic iphone) list with albums. When i click on a album then i view the contents in another page wich is touchscroll enabled. The first tab (current) displays a grid view, while the second tab a list view. Know that works great, exept..sometimes i get to get scrolling in all directions (horizontal and vertical) -> i need it to stay only vertical.
To eliminate some css bug possibilities i’v debugged it twice and i can’t figure it out why do i have sometimes (for some albums) multi-scrolling. (the code is the same so it should be like that)
THY
Comment by Carsten — May 27, 2010 @ 6:27 pm
@Abraham: I had exactly that, too. For development use mac-desktop-safari-4+ (the standard setting under “developer”).
Don’t switch to Mobile-Safari or whatever because then the desktop version doesn’t handle the TouchScroll very good.
Comment by Carsten — May 27, 2010 @ 11:00 pm
@Abraham and @David:
I correct myself: This bug happens for me when I use the touchscroll.js in src/ and when I use the touchscroll.min.js it’s working soso ok in desktop safari as mentioned above.
Comment by Abraham — May 28, 2010 @ 3:42 pm
@Carsten
The reason for that is that the touchscroll.js doesn’t have the bezier class. If you are goign to use that one, simply download David’s bezier js (you can find it on github). If not, use the min which includes it already.
I also found out that the performance was much better on the device itself than just safari.
Comment by Carsten — May 30, 2010 @ 10:45 pm
@Abraham:
Thanks, good that it’s my bad :) Plus, I use webkit-nightly now and deving/debugging is much much easier!
@All:
I had an issues with TouchScroll and JQuery, when ajaxing in content and so, but founf a workaround:
Glitch: Doubling of onclick=”" in residing in by calling setupScroller()
Workaround:
@David:
The last issue I have is with forms inside of scrollers (what “shivraj” posted in comment#48). Is there a patch on the horizon?
Comment by Carsten — May 30, 2010 @ 10:47 pm
@Abraham:
Thanks, good that it’s my bad :) Plus, I use webkit-nightly now and deving/debugging is much much easier!
@All:
I had an issues with TouchScroll and JQuery, when ajaxing in content and so, but founf a workaround:
Glitch: Doubling of onclick=”" in [a href] residing in [div class="scroller"] by calling setupScroller().
Workaround: [a href="" onclick="return false;" onmouseup="doSome();"]
@David:
The last issue I have is with forms inside of scrollers (what “shivraj” posted in comment#48). Is there a patch on the horizon?
(Sorry, for doublepost, htmltags broke the first one)
Pingback by Wolfgang.Schmidetzki.Net: Weitere Mobile-Safari Einschränkungen — June 1, 2010 @ 10:18 pm
[...] einsetzen kann, um das gewohnte Ein-Finger-Scrollen künstlich nachzubilden. Zwei davon sind:iScrollTouchScrollAusprobiert habe ich beide bisher noch nicht.Alternativ kann man das Scrollen auch mit der folgenden [...]
Comment by pectory — June 2, 2010 @ 11:53 am
@Carsten…
I’v got the same bug :))
I’v put an alert inside my onclick function, and it is sometimes doubled!!
Comment by Gerry Straathof — June 8, 2010 @ 4:10 am
I am trying to understand the example that you have provided, but I cannot. I am trying something similar (multiple divs id’s/classes) that are hidden but that are scrollable once they are visible.
They are not becoming visible through the use of a tab function such as in your example. In fact, some of them are becoming visible through the links that are inside a separate (originally invisible) scroller.
How does one simply generate a scroll function and make it active on becoming visible. In simplified terms, please.
An example of what I am working in is here: http://straathof.acadnet.ca/
It is done using iscroll at teh moment, but that javascript isn’t what I would like for cross-device uses (and it limits the interaction of the links inside a scroller)
Thank you.
Comment by Gerry Straathof — June 8, 2010 @ 4:10 am
(addendum) That site only works on iphone/ipodtouch at the moment (looks iffy on pc’s)
Comment by Andy — June 9, 2010 @ 8:39 pm
Hi,
First let me say this is a fantastic piece of code and has really helped in the implimentation of a web app I am building.
We have a way for people to favorite listings in the scroll area, however if they are scrolled down on the page and they choose to show their favorites, if they are too far down the page all they see is a blank area and they need to scroll up to see their information.
I looked through the code but could not find a scroll to top option.
Do you have any ideas on this?
Thanks
Andy
Comment by Abraham — June 11, 2010 @ 3:24 pm
I have a scrollable list with an href=tel:xxxxxxxxx. I always declare a scroller regardless on the size of the list (the list is poopulated via ajax). However, when the content overflows my href link stops working, I can click (tap) on it and it doesn’t do anything. however, if the list is small enough, the hyperlink works fine and the device gives me the option to call, save number etc. Does anybody have any ideas or solutions to this?
Thanks,
Comment by Abraham — June 11, 2010 @ 3:26 pm
@Andy
What do you mean when the choose to see their favorites, does the view change, do you remove content in the list? Is that why users have to scroll up?
If you actually remove content, why don’t you instead create another div and scroller that is presented (look at the touchScroll demo). That way the content will appear at the top regardless.
Comment by Carsten — June 14, 2010 @ 3:16 pm
@Abraham: That seems to be the same glitch that prevents forms from working correctly. Did you have a look at my post#60?
I mailed David my research and findings and atm I’m keeping my fingers crossed that David finds time to look into that very soon or else I would have to switch to something else :(
@David: I begin phonegap implementation of my project tomorrow and if something behaves different when compiling with XCode I’ll let you know right away.
Comment by Andy — June 14, 2010 @ 7:38 pm
@Abraham
Thanks for the reply,
The content is being hidden in the div, rather than perform another query. As the div is pretty long, when it is hidden they may be scrolled down the page quite a way. If there was a back to top scroll that would be perfect.
Otherwise I can look at performing a query against the DB to retrieve just the matching records.
Cheers
Andy
Comment by Abraham — June 15, 2010 @ 7:59 pm
@Andy
There is currently no back to top scroll…You could do the query against the DB, or if you’re hiding content….or could you populate from the db two different div, one with all the content and the other with just the favorites and have one hidden while the other is visible and toggle those two, that way you only call your DB once?
Comment by Andy — June 16, 2010 @ 3:15 am
@Abraham
Now that’s an interesting idea. The problem now is we have added filters to the list, filtering the days and session tracks as well. I think that would add a little too much pre-processing time (especially as majority will be on iPad or iPhone)
wondering now if there is a way that when elements hidden reset the parent div height to elements that remain.
Ah, the things that trouble us late in the evening!!!
Cheers
Andy
Comment by Abraham — June 16, 2010 @ 4:43 pm
I am trying to use a scroller on a video list with , however they are fixed; they do not scroll. Has anybody run into this problem, does anybody have an idea on how to fix it?
Comment by Carsten — June 17, 2010 @ 1:33 pm
@Andy
I had the same prob with scrolling to top. For me it works like this:
- The scroller is hidden and I’m about to load new content into it and show it
- Call scrollers["myscroller"].scrollTo(0,0); on _before_ you load in new content
Comment by Erik — June 21, 2010 @ 4:11 pm
I have a slight problem where the bottom tabbar is getting cropped when I view in the iPhone SIm, via phonegap (Text not showing, meanwhile if watching in Safari it shows).
Anybody got the same problem?
Comment by Carsten — June 24, 2010 @ 1:43 pm
Good news:
As soon as I switched from basic building and testing in Webkit to XCode/Iphone-Sim all the remaining problems just vanished. Doubling of clicks, updating of the scroller, forms – everthing works perfectly in the simulator.
Will post here once the app is on the actual device and how it works out.
Comment by claudio — June 30, 2010 @ 10:06 am
Awesome, thanks!!! Keep up the good work.
Claudio.
Comment by tdskate — July 6, 2010 @ 12:31 am
@Abraham
Have you found a solution for fixed video objects in a scrolling element ?
I have the same problem…
Comment by Abraham — July 6, 2010 @ 4:30 pm
@tdskate
Comment by Abraham — July 6, 2010 @ 4:31 pm
@tdskate
I have not found any solutions, I’ll be sure to post if I do.
Comment by Tdskate — July 7, 2010 @ 12:46 am
@Abraham
Could it be possible that video objects on iPad don’t respond to touchmove events, and are by design locked to the window viewport?
Comment by David Aurelio — July 7, 2010 @ 9:30 am
Hey Guys,
sorry I haven’t been here for so long.
The bad news: I’ve run into the video issue too. I think it is simply a problem with “replaced objects” and -webkit-transform – I don’t know any solution to the problem other than displaying videos in an overlay.
The good news: I’ve invested much work into experimenting with animations and transitions and into code cleanups. You will see a new version shortly.
Regards,
David
Comment by Tim — July 7, 2010 @ 1:10 pm
David – Looking forward to testing the new version. I’ve been able to plug the current Master branch version in to my web app for the iphone platform. I’ve conditionally turned off TouchScroll for Android devices in this app. Experiencing issues with flicking locking up the scrolling and touch input for a number of seconds as well as issues with the soft keyboard not going away when I click on an element in the scroll div. Hoping the new version will fix these 2 issues. Keep up the good work.
Comment by tdskate — July 8, 2010 @ 1:30 pm
@ anyone
I’d really like it if onorientationchange, my TouchScroll object could reset its content to the most top left position. Is that possible?
Comment by Dman — July 9, 2010 @ 1:47 am
Wow this looks really polished. If I release something to app store with this, where do I need to give credit? Some sort of about page, or the support page for the app. Phonegap user.
Comment by tdskate — July 9, 2010 @ 5:38 pm
Another small problem:
If elements inside a TouchScroll trigger a touchmove event (added by XUI), the scrollbar will stay visible …
Comment by tdskate — July 9, 2010 @ 5:39 pm
ignore last comment, it’s not so :)
Comment by Andre — July 12, 2010 @ 11:04 pm
I can’t get this to run on Android (2.2). The content is not scrolling at all. Any suggestions?
Comment by Andre — July 12, 2010 @ 11:36 pm
More info:
It looks like the call to “new CubicBezier()” isn’t working…
Comment by tdskate — July 14, 2010 @ 10:44 am
@Andre
Are you using the minified version of touchscroll in the dist folder? or the source file? because if you use the source folder you’ll need to add this script: http://github.com/davidaurelio/css-beziers
Comment by David Aurelio — July 15, 2010 @ 9:20 am
@Tim: I will change quite some things for Android … Also, I’m not sure if a separate scroller (based on scrollLeft/-Top) wouldn’t be a better solution.
@tdskate Resetting the scroller is possible: Connect to the “orientationchange” event and call scrollTo(0, 0) on the scroller instance (not the DOM element)
@Dman TouchScroll ist BSD-Licensed. You can basically do what you want with it as long as the copyright notice *in the source code* remains intact. No attribution in the UI of the app is needed.
@Andre – I still have to do tests with Android 2.2 and as stated above, maybe a different solution will work better. I’ll let you know. Also look at tdskates latest comment.
Comment by John Funtymeeee — July 16, 2010 @ 1:15 pm
In replky to post 60, thank you very much.
I was begining to go crazy trying to stop the clicking twice bug when using click events within jquery. in summary this is what worked for me after reading your post.
$(“#clickme”).mouseup(function(){
//do some stuff
});
$(“clickme”).click(function(){
return false;
});
The above only works on an actual iphone or ipod touch. To test your code works you can swap the mouseup with click and test on Safari using an iphone user agent, example
$(“#clickme”).click(function(){
//do some stuff
});
$(“#clickme”).mouseup(function(){
return false;
});
Once again thank you very much Carsten, post 60 was a blessing this week.
Pingback by Ajaxian » Dojo 1.5 is Out and it’s Feature Packed! — July 22, 2010 @ 8:06 pm
[...] TouchScroll: scrolling layer for WebKit Mobile [...]
Pingback by Live Demo the jQTouch Driven, iPhone-Optimized Webapp Portfolio « Generation @tL — August 1, 2010 @ 12:38 am
[...] I’ve kept the jQtouch elements mostly (apologies) untouched, having found a way to keep that stubborn sticky footer (AKA tabbar, AKA toolbar) in its proper place using a combination of the CSS in jQTouch r148 and ScrollTouch. [...]
Comment by Rafi Ton — August 5, 2010 @ 7:38 pm
Great Library!
I’m trying to use touchscroll on an android device with phoneGap using the instructions above to scroll a div with content while keeping a tab bar fixed on the bottom of the screen, but, I cant make the div scroll.
I’m trying to make div id #boxes with class .scroller scroll:
Here is the code I’m using:
…
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
var tabBarTop = parseInt(screenHeight – 45) + “px”;
var boxesHeight = parseInt(screenHeight – 45) + “px”;
if (android_version<8) { // android 2.2 works perfectly with position:fixed.
$("#boxes").css('height', boxesHeight);
$("#boxes").css('width', screenWidth);
var scrollNode = document.querySelector(".scroller"), options = {};
var scroller = new TouchScroll(scrollNode, options);
}
Any ideas?
Thanks
Rafi
Comment by David — August 11, 2010 @ 10:37 pm
@Erik
I have the same problem with the tabbar being cropped in the simulator via phonegap but not in desktop safari. It seems about half of the height is missing.
Did you find a cause and solution in the end?
Comment by Matt — August 20, 2010 @ 10:32 pm
So I can’t get this to work at all. Trying to use it with JQTouch.
I’ve surrounded a ul element with a div with class “scroller”. This div has overflow:hidden and a fixed width and height.
I have the following in my js file:
var scrollNode = document.querySelector(“.scroller”), options = {elastic: true};
var scroller = new TouchScroll(scrollNode, options);
All I’ve succeeded in doing is locking up scrolling completely. Whatever I see on the screen is now what I get, even if there are 40 more elements below the fold on the iphone.
Anything else I should be doing?
Thanks.
Comment by Norman — August 31, 2010 @ 7:21 pm
Great work David!
works great for me with PhoneGap on the iPad
to improve it, i would suggest following:
1) make a downloadable archive with everything required (also css)
first i tried it without the css and i was wondering how this shall work.. after i recognized that it didnt work, i dl the demo and extracted the css from there.. then it was fine
2) make an option to automatically setupScroller (or was it setupConfig?)
i have a scrollable list of ul>li with images inside the li. problem is that the height of the ul increases after the touchScroller has been attached… now i had to make onload events for all images to manually fire the setupScroller method
i think a lot of ppl have scrollable contents with images, so maybe u could provide such a method out of the box
regards and greetings to all uxebus
Norman
Comment by Dammad — September 1, 2010 @ 7:40 pm
Any progress on support for android 2.2? Doesn’t work on any 2.2 device I’ve tried.
Comment by CW — September 2, 2010 @ 3:08 am
Hi All,
David, great work, looking to use this in an upcoming project.
I have created a demo using a single scroller, applying css media queries to change the location of the scroller on the page (at the bottom in portrait mode, at the right in landscape mode)
If I change orientation when the scroller has been moved, the ‘new’ scroller does not seem to display correctly it seems as if it is being offset. When you touch the offending scroller, it seems to ‘jump’ back in to place, and works fine.
Really hard to explain, so here is a link:
http://www.m60digital.co.uk/touchscroll/demo.html
if you view in landscape mode, scroll the right hand scroller down, and then flip to portrait, you will see what I mean.
I have tried using scrollTo(0, 0) to no avail.
I was wondering if anyone else had experienced such behaviour. Any help on this would be hugely appreciated.