I’ve been asked to publish a new version of iScroll even if in development phase. Here you have it, but keep in mind that we are in Alpha1, the script is very rough and not ready for production.
First things first. iScroll was born because mobile webkit (iPhone and iPod touch mainly, but also Android and Pre) does not provide a native way to scroll inside a overflow:hidden div. This unfortunate situation prevents any web-app to have a fixed header and/or footer and a scrolling central area.
Luckily mobile webkit offers a powerful set of hardware accelerated css properties that can be used to simulate the missing functionality, so the iScroll development has started… But there’s no rose without thorn. Making the scroll feel native has proven more difficult than expected. Version 2.x of the script was good enough, but it was lacking a lot of features.
Enough blabbing. Have a look at the screencast I baked for you or point your mobile device to cubiq.org/dropbox/iscroll.
Fixes and features I’m currently working on
The most requested features are horizontal scrolling and scroll bars. You’ll be pleased to know that I’m working on both of them. Here follows a not-so-complete list of features and bug fixes I’m working on:
Adjust scrollbars position- 2009/12/02Scrollbars should not overlap- 2009/12/02- Scrollbars should shrink when scrolling outside of the margins. I’ve already implemented this feature but performance degenerates too much and I decided to remove the scrollbars shrinking.
- Disable horizontal scrolling/bouncing if horizontal scrolling is not actually needed.
Make scrollbars optional- 2009/12/04 syntax: iScroll(obj, [x|y|auto|none]])- Reduce flicker with preloading. I’ve found an easy way to pre-load elements outside of the viewing area. This should drastically reduce flickering
- Prevent the scrolling to lock when swiping outside of the screen
- Better form fields compatibility
- Tidy up the mess
- Check Android compatibility
Documentation
I’ll work on documentation as soon as the first beta will be ready.
Other considerations
The script is MIT licensed, as always. I’ll soon publish it on google code for anyone to fork.
Many suggested that the scroll also works without mouse click overriding (the e.preventDefault() in the onTouchStart()). All we have to do is to add an onClick event listener returning true only if no swiping has been done. I tried and it works but it looks a bit dodgy to me. I still prefer the preventDefault version.
Stick around as I’m updating this script on a daily basis.
Last but not least, the script evolved with the help of many contributors which sent their suggestions and pieces of code. You find all of them in the comments of the original iScroll post. I’ve just put things together, I’m not solely responsible for this mess 
FAQ
Q: Why aren’t you adding feature X?
A: I’d like the script to work on fist-gens, iPod included. Many features work flawlessly only on iPhone 3GS.
Q: I’ve developed feature X, may I send it to you? Will you add my code to your script?
A: Please do! It’s not guaranteed that I will add your feature to the script, but I’ll review all code you send to me (matteo [at] this domain). Consider that scripts will be released under MIT license, if this is a no-go for you, don’t send.
Q: I’m in a hurry and I need feature X to be added to your script ASAP. Can you help me?
A: Have you considered hiring me? (matteo [at] this domain)
Q: If I hire you to develop feature X will I be the owner of the new script?
A: If feature X is in the list of features I’m already working on, the new script will be released to the public under MIT license. If you need a new feature not in the to-do list, the intellectual property will be yours (MIT parts excluded). If you are in a hurry and you desperately need a feature listed in the to-do you may consider sponsoring the script development.
Awesome work as usual.
I too noticed performance problems with scrollbar shrinking when I implemented my own scrollbar for iScroll 2.3. Moving is no problem because transforms are hardware accelerated, but changing the height of the scrollbar make the performance awful.
I ended up with placing the scrollbar in a div with overflow set to hidden. That means you could just use transforms to move the scrollbar partially outside of the visible area of the div and effectively shrinking the height of the scrollbar.
The only thing is that the scrollbar is rounded and the div is rectangular. So if you ’shrink’ the scrollbar one side will be rectangular and the other side will be rounded. I solved this by placing little dots in the background color on top of the div in all four corners. This makes it look rounded, but it is a bit fragile, especially if you want do not have a solid background color. Still it works pretty good in my own app.
Cheers,
Niels
@Niels: I think the best thing we can do to shrink the scrollbars is by using
-webkit-transform:scaleY(). Should work but probably rounded corners will be squashed. Not tried yet, but should work pretty well.@Matteo: Yes, I thought about that too and can see no real performance problems. In my own application I opted for the ‘dots’, simply because I wanted to have ‘real’ rounded corners and my background color is pretty stable. But for a more stable solution I would try scaleY instead.
[...] This post was mentioned on Twitter by Bertrand Dufresne and Matteo Spinelli, sponso RING. sponso RING said: Scrolling div for mobile webkit turns 3 | Cubiq.org: If you need a new feature not in the to-do list, the intellectual p http://url4.eu/r0IP [...]
Thank you for your great work. I am gonna give it a try now!
Social comments and analytics for this post…
This post was mentioned on Twitter by sponso_RING: Scrolling div for mobile webkit turns 3 | Cubiq.org: If you need a new feature not in the to-do list, the intellectual p http://url4.eu/r0IP...
I’m curious how one might go about using scrolling with multiple divs using iscroll.js. I’ve played around with it a little using 2.3 and haven’t had any luck so far, but I feel like I’m missing something pretty simple.
For example, in a PhoneGap app I’m working on, I’ve got an absolute-positioned div that slides into visibility from the left when the user taps an item in the original scrolling div. If I wanted to scroll the second div, how would I go about doing so?
@Adam, you can create as many instances of the iScroll as you want (or at least as many as the iPhone can handle). Have a look:
http://cubiq.org/dropbox/iscroll/2scrolls.html
Personally I wouldn’t create new instances of iscroll. I would have it so all diva with an iscroll class could be scrolled. You wouldn’t need to initialize it more than once, only refresh it ontouchstart of a new element.
As for the scrollbars, you should have a parent element that is 2px smaller than the scrolling div on the top and the bottom and then give it overflow hidden and a radius on the corners. When the scrollbar goes out of the boundaries, it will appear to get shorter and not just get cut off with a flat edge. Then you would only need to edit the height of the scrollbar when it refreshes and you can limit how far it can go out of the boundaries so that it doesn’t go more than a circle. If you wanted to be really exact you could even add a little White go around the scrollbar and have add one to the far end of the overflow container when it goes out of bounds.
Also, you should add a zoom effect that allows you to zoom in on whatever is in the scrolling div using pinch gestures.
hi Aresinferno, thanks for your feedback. I’d like to test the scale transition first. It sounds more logical and doesn’t need additional markup. The rounded container is a brilliant idea, though.
Regarding the zoom, I don’t think it will be implemented, not in the core version at least. Maybe I could add some plugin system. I’d like to release even the scrollbars as a plugin.
@Matteo, thanks for the heads up. I’ll give it a try using your example.
Thank you for this slick piece of code.
Works great, easy to implement. I’m actually using it inside a PhoneGap App.
Horizontal bouncing is the only “bug” visible for me, and isn’t an issue.
Thanks again!
Great script however i ran into an issue when i placed a tag in it. It seems to float over everything and ignore the scrolling. Any ideas?
Alpha3 is out, now you can turn on/off scrollbars individually.
Ex:
// Horizontal scrollbar only (vertical is disabled) myScroll = new iScroll(document.getElementById('scroller'), 'x'); // Vertical scrollbar only (horizontal is disabled) myScroll = new iScroll(document.getElementById('scroller'), 'y'); // Scrollbars disabled myScroll = new iScroll(document.getElementById('scroller'), 'none');@Aresinferno, A parent element with rounded corners and overflow hidden will not work. The child element will still clip using a rectangle and not take the rounded corners of the parent into account. It’s a bug in Webkit.
@Niels: DOH! It was too good to be true
@Niels,
Seriously? And I thought webkit was the king and it can’t even get something as obvious as this correct. There must be some kind of suitable solution.
The drop down problem still exist in this version, I suggest adding the following code at the beginning of handleEvent:
var theTarget = e.target;
if (theTarget !== null && theTarget.tagName === ‘SELECT’) {
return false;
}
man, you’re good.
but, lets say you need only veritcal scrolling. it seems easier to track a Y-axis swipe, and use a CSS animation with a default distance and ease-out. Boy, its crazy that position:fixed isn’t properly supported.
@timtim: you mean no acceleration? Just a default distance? Unfortunately it wouldn’t feel natural (already tried
).
I agree that it’s crazy the amount of JS needed to do such a simple task. If Apple can’t make
position:fixedwork at least they could introduce a CSS property like:-webkit-scroll: x|y|auto|noneit’s devastating the quantity of bugs in css rendering of the mobile webkit… The scrollbars scaling is becoming a pain in the arse.
great job man!
any estimates on iscroll3 updates?
@Udi, I finally found a way to have those damned scrollbars shrink. Today I’ll publish an update, stick around.
Thanks man!!!
And again, great work!
I uploaded a new version of the script which supports the scrollbars shrinking. It’s still buggy but it works, I’ll debug it in the coming days. Unfortunately, as noted by another user, round corners do not clip the webkit-transition. I also tried with webkit-mask property with no success. Scaling the scrollbars would have been perfect, but there’s no way not to have the round corners to squash. So a lot of hackery is needed to shrink the scrollbars.
The solution is to move the scrollbar outside of a
overflow:hiddencontainer and recreate the rounded corners with an overlaying small rectangle. A pain in the butt, let me say it! And still not perfect. Any other ideas?@Matteo How about splitting the scrollbar into three parts. First a div with half a circle. Then a div for the body of the scrollba. Finally again a div with half a circle. To change the size would be relatively simple. To move the rounded corners you can use a translate transform. To change the height of the body you could use a scale transform. And the best thing is everything should still be hardware accelerated.
@Niels: it’s not easy to have the scaling body to match the translating corner (you know floats rounding is not our friend). But maybe I found another way using background images. I’ll test it later. Today I also played with a similar code by Apple and I’m pleased to see that their implementation has more bugs than mine
Sorry Matteo but apple has outdone you in some aspects. And me as it happens as I was developing a web kit but PastryKit has got the shrinking scrollbar bit almost perfect, along with everything else.
http://ajaxian.com/archives/pastrykit-an-iphone-webdev-library-from-apple
@Aresinferno: that is the code by Apple I was playing with. But it has many issues (consider that iScroll3 is alpha stage) and lacks some functionality but most important it’s not MIT licensed, you can’t actually use it
@Matteo But that won’t stop people picking it apart or even some using it.
Scrolling on iphone 3g is pretty choppy with PastryKit.. Don’t know if it’s the case with iscroll for the same content..
I created this last night in 2 hours:
http://www.youtube.com/watch?v=AVZ0Jq54GP8
Matteo - Your code helped me out way back months ago, and I posted way back, having fixed the stall that happens when dragging off the bottom of the touch screen..
I didn’t even know pastrykit existed until after I made this scrolling demo.
Matteo, does your newest version address the issue with text input pushing the footer div up the page, requiring the user to tap the status bar to scroll everything back into view?
That’s the only thing keeping this from being a killer script (oh who am I kidding, it’s already pretty killer!)
Great job so far!
I saw you had code commented out at the bottom of onTouchMove for launching the touch end event.
That code is very similar to the fix I created for swiping off the bottom of the screen. I created this for v2 of iscroll, but I have updated it for iscroll v3.
“Prevent the scrolling to lock when swiping outside of the screen”:
within iScroll (el, scrollbars), I put this:
after this.element = typeof ….
at the bottom of onTouchMove, there is a need to introduce timers again (sorry!) but it does what is needed (please note, the value-check on startY is to handle very-fast swipes whose last onTouchMove event was not close to the bottom of the screen):
// Fix for touch-move off bottom of screen not firing touchend event if (typeof(this.stopScrollTimeout) != "undefined") { clearTimeout(this.stopScrollTimeout); } orient = Math.abs(window.orientation); if ( (orient == 90 && this.startY > 90) || (orient != 90 && this.startY > 250) ){ this.stopScrollTimeout = setTimeout( function() { t=e.targetTouches[0].target; t=(t.nodeType==3?t.parentNode:t);t.iScroll.checkOutOfBounds(e);}, 300); }Between onTouchMove and onTouchEnd, I placed this function (note, I replaced my code for the function with a duplication of your code from the bottom of the onTouchMove, to prevent confusion):
checkOutOfBounds: function(e) { var theEvent = document.createEvent("TouchEvent"); theEvent.initEvent('touchend', true, true); this.element.dispatchEvent(theEvent); return false; },Hope that helps.
I’ve designed a carousel for a webapp game. How would I go about “locking” an axis meaning if i just want it to scroll left and right and not have it dragged up or down (Y-axis) is there a way to do this. I can’t for the life of me figure out how to prevent this in the code.
thanks in advanced!
paul
okay perhaps i’ve spoked too soon. to achieve the desired effect i spoke about (locking an axis so that it doesn’t move if those bounds aren’t specified) replace
this.element.style.webkitTransform = ‘translate3d(’ + this._xPos + ‘px, ‘ + this._yPos + ‘px, 0)’;
with
if(this.scrollbars.x && this.scrollbars.y) {this.element.style.webkitTransform = ‘translate3d(’ + this._xPos + ‘px, ‘ + this._yPos + ‘px, 0)’;}
if(typeof(this.scrollbars.x) == ‘object’ && typeof(this.scrollbars.y) == ‘undefined’){this.element.style.webkitTransform = ‘translate3d(’ + this._xPos + ‘px, 0px, 0)’;}
if(this.scrollbars.x == ‘undefined’ && this.scrollbars.y){this.element.style.webkitTransform = ‘translate3d(0px, ‘ + this._yPos + ‘px, 0)’;}
im sure theres a better way of going about this, but this simply just works.
oop, paste this instead:
if(typeof(this.scrollbars.x) == ‘object’ && typeof(this.scrollbars.y) == ‘object’) {this.element.style.webkitTransform = ‘translate3d(’ + this._xPos + ‘px, ‘ + this._yPos + ‘px, 0)’;}
if(typeof(this.scrollbars.x) == ‘object’ && typeof(this.scrollbars.y) == ‘undefined’){this.element.style.webkitTransform = ‘translate3d(’ + this._xPos + ‘px, 0px, 0)’;}
if(typeof(this.scrollbars.x) == ‘undefined’ && typeof(this.scrollbars.y) == ‘object’){this.element.style.webkitTransform = ‘translate3d(0px, ‘ + this._yPos + ‘px, 0)’;}
Is there a way to save the last scroll position so that when the page is refreshed it can position to its previous point?
Awesome, awesome script!
I have seen others, but they do not do the job as well or as neatly.
Is it possible to limit scrolling to just one axis?
FYI, iScroll is compatible with “Overscroll” ( http://azoffdesign.com/plugins/js/overscroll )
If you call overscroll on the wrapper, then PC users can scroll the DIV with a click and drag motion too.
This enables iScroll content to be fully cross browser and behave similarly.
I have a demo here:
http://placebook.tv/isgmfb.php
iScroll is used for the main menu and if you click help in the main menu, the help page is an iScroll too.
This is tested on:
Desktop Firefox
iPhone Safari (Normal)
iPhone Safari (”Homescreen App” mode)
Desktop Safari
Android
It should look identical* in all. It handles any screen resolution and also change of dimensions (rotate on mobile, resize on desktop) in all.
(* In desktop browsers, in the help menu, the scroll bar is shown deliberately, I prefer it that way)
Just onhe thing - in the help menu iScroll, why is there no styled scrollbar like there is on the main menu iScroll?
Hi.
Thank you for this.
Quick question…I started a website, http://www.giroapps.com. in the overview of the apps, i have an iframe. i used your code so it’ll port well on the iPhone. However, i can’t seem to make it work.
I added the and around the lines in my html (not in the html that the iframe gets its content from). I also added:
to the head of that same html file. Added the js file, too.
I don’t know what i’m doing wrong…hope someone can help me with this.
If any angel wants to help me with this, please email me at: lauranoel at me dot com, so i can send my code.
Thanks in advance!!
I finally got it to work on the iPhone. Problem now is the iFrame on safari isn’t moving. When i use it on my iPhone, the iframe scrolls perfectly.
this is my html:
Your browser does not support iframes.
new iScroll(document.getElementById(’scroller’));
window.onload = function() { setTimeout(function(){ new iScroll(document.getElementById(’scroller’)) }, 100) };
this is my css:
div#wrapper {
clear: both;
height: 297px;
width: 421px;
margin-top: 214px;
margin-left: 333px;
position: absolute;
z-index: 5;
}
div#scroller {
clear: both;
height: 297px;
width: 421px;
margin-top: auto;
margin-left: auto;
position: absolute;
z-index: 4;
}
hope someone can help me figure out why it isn’t working on safari anymore.
Thanks in advance!!
Much more full featured demo:
http://placebook.tv/isgmfb-0.2.php
Interestingly though, I am having trouble scrolling past anything created that went outside the browser viewport. Is this a bug or something maybe? It’s probably me…
hi matteo
referring to:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5#comment-8
respectively
http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5#comment-9
i still have the problem above, how can i change the top attribute instead of -webkit-transform element on screen?
i tried: this.element.style.webkitTransform = ‘translate3d(0, ‘ + this._yPos + ‘px, 0)’;
but simply this obviously doesn`t work. unfortunately i can´t find a solution. could you plaese show me yours?
thanks a lot
Hi,
I have an intranet version running iWebKit and it works well… I run it in fullscreen mode
but when adding the iScroll all of my links are opened in safari instead of keeping the new url in fullscreen mode.
What am I doing wrong?
Thanks
/Martin
Has anyone been able to get this to work correctly on Android? I just tried it on the Nexus One, and it works, but only for the first scroll gesture. After that, webkit goes back to scrolling the entire page again.
I’m hoping its a simple fix! Please let me know if you have any ideas.
I am using iscroll for a iphone-like application using WebApp.net as the framework.
Well, I’m running across an issue that I hope I can get help with.
I am running iscroll in the third page of my application, that means that the div that has the iscroll is not the div in display when the application is being loaded. I have set a delay of 3 seconds to give iscroll enough time to load after all the other elements of the applications are being loaded but iscroll is still not responsive.
Iscroll is only working when I refresh the application when the div that contains iscroll is displayed on the iphone.
Does anybody have any suggestions in how to get iscroll to respond, or be ‘active’ for a lack of a better term even when the div that contains it is not being displayed at loading time?
\
Awesome script!
yah im one of those people who only post when there’s a problem..
last night, I was marking up some manual image crops in an iscroll with a few individual spans (( display:block, overflow: hidden )) and just needed to put them in line.
Of course I then just floated them all to the left. Looks perfect.. S#!& , displays fine with floats but the iscroll height is off , 0 height? after scrolling down it pops right back to the top like there is no content ..
Tried a few things to adjust the height, fixed positioning elements further down , no results.. the floats seem to be offsetting something.
For about 30 minutes or so I tried every other side by side technique I could think of including just throwing everything in the old table schema , tables display fine (( but oddly enough there seems to be a mobile safari bug where images intermittently are hidden untill touched when in a td .. ))
so damn .. no floats, no tables, can’t use display:inline, will kill the crop effect , ok display:inline-block seemed to do the trick.
I double check it this morning to and it seems fine.. 90% of the time .. now randomly ( say 1 out of 10 times ), when the iscroll is initiated.. it starts midway through the content, the first line of spans are hidden unless you scroll Up..
If anyone has dealt with this scenario, feel free to school me.
and Matteo, again awesome script, sorry my first post is about an issue..
false alarm,
I swapped the spans with divs , corrected the mid-scroll issue.
although.. then the images seemed to load whereever they wanted and not inline.
for test, i threw some color on the div backgrounds to check positioning and they load perfect before the images arrive.
this prolly has more to do with mobile safari than with iscroll im sure.
considering the divs load in correct position, I just applied the images individually to the div background .
floating inline image crop effect successful.
just another css nightmare.. on to the next one
I’ve been using an older version of this script & as reported by other users I too have come across the issue where the text in input boxes gets garbled.
Has this issue been resolved in the latest version?
Thanks
Thanks for this, it’s let me develop a good fixed layout for the iPhone. It’s broken on an Android simulator for me, still looking into that.
The site I’m working on is meant for many phones, it uses Javascript to make links load dynamically. This functionality broke when I added iScroll; I fixed it by changing the final argument to the initEvent call in the onTouchEnd method to true, allowing the click event to be canceled. Any reason it shouldn’t be cancelable?
Here’s how we were able to fix the Android problem (only the first event would scroll):
In onTouchEnd function, comment out this line:
//document.removeEventListener(’touchend’, this, true);
Anyone had luck with the following?
-preventing horizontal scrolling on elements that aren’t wider than parent (it is a To Do on the creator’s list)
-clicking links that are within the iScroll region:
specifically, I’m trying to set up a rule in onTouchEnd function that if the move was fewer than N number of pixels set this.moved to false so the click is handled. A) Is this a good approach and B) if not, what would be a good solution to filter “unintended scrolls” so links are available?
@Jason:
// Vertical scrollbar only (horizontal is disabled)
myScroll = new iScroll(document.getElementById(’scroller’), ‘y’);
reguarding the other issues I’m a bit busy at the moment, but I’ll be back on iScroll next week. So stick around!
is there an easy way to stop the scrolling to the right and left at the moment?
This is exactly what I was looking for to start developing for the iPad - I do have one request. I would like to have the ability to lock the x dimension entirely. I like your implementation of the scroll bars in your last release; however, as I’m scrolling vertically, I’m also pushing the content slightly to the left or right, revealing the gray background on the sides. I want to completely lock down any horizontal movement. (or vertical for that matter if I’m in a horizontal scroll need).
I will dig into the code tonight a bit to see if there is an easy fix but I thought that I would put this out here as a feature request for future versions - great job
Dan
Debugging
I tried loading this in safari and change the user mode to mobile 3.1.2 to see if I can get to work on my machine; however, I get no movement on the screen. How are doing any debugging work with this script? really missing firebug about now
Dan
Awesome script, Matteo, but I’ve noticed one thing:
The HTML ’select’ form item doesn’t work when it’s inserted into the scroller div. It displays as you’d expect (first item shown in a box with an arrow to the right, the standard styling), but it doesn’t register any touch events. To make sure it wasn’t my HTML that was at fault, I copied all the code from inside the scroller div into a new page and it was fine. I added the meta tags (no scaling, device-width, web-app-capable, etc) one by one and it still worked okay - so I can only conclude that iscroll.js is causing the problem.
Tested it with both v.2 and v.3 of the scroller script. Radio buttons are okay, as are checkboxes and textfields.
Any ideas about how to get select form items working would be great
Sorry to only comment when I noticed a problem! Despite this, though, it’s still an outstanding acheivement, excellent work.
Cheers,
Luke.
Luke, see Comment
#19
Date: 2009/12/07 @ 19:19
By: Udi
Fixed it for me (manually edit iscroll.x.x.js, I’m using 3.0a and adding those four lines fixed it.
v3.0a5 works perfect inside an iframe!
Outstanding, Matteo!
Now there is a small problem with two or more scrollable divs at once:
The scrollbars will allways show on the last scroller, all of them..
Your muitiscroll example shows this problem also..
Is there an easy fix?
hi there, im stuck trying to stop it from scrolling left and right, any help would be perfect…!
@steve morris:
Look at paul’s posts #37 & #38. Works great!
Textboxes inside the scroll area get kinda garbled when you type in them. Any idea why?
Okay guys, sorry for all the not replied questions. I’m assiduously working on an uber optimized framework for mobile devices. Follow me on twitter for updates (http://twitter.com/cubiq). The iScroll will be of course part of whole project. I think that there’s nothing like what I’m going to release, and all will be MIT licensed. Stick around.
There is one small issue with instantiating multiple of these per page (i.e. for use with jqtouch). To fix the scoping issue, the scrollbars definition needs to be moved from the prototype section to the main iScroll function.
function iScroll (el, scrollbars) {
this.element = typeof el == ‘object’ ? el : document.getElementById(el);
this.wrapper = this.element.parentNode;
>> this.scrollbars = {};
iScroll.prototype = {
_xPos: 0,
_yPos: 0,
scrollX: false,
scrollY: false,
maxScrollX: 0,
maxScrollY: 0,
<< //scrollbars: {},
Has anyone tried to add a Youtube video via object tag or video/audio tag. It seems not to work and float on top of everything.
Thanks for giving us this wonderful function.
Regarding drop-down select boxes. I applied the solution mentioned in comment #19 and, while the drop-down worked, scrolling failed. I can get the page to scroll OR have drop-downs but not both.
I placed the suggested code after handleEvent: function(e) and in various other places but with the same result. I see that others have got past this problem, can anyone tell me where I am going wrong.
I am current;y using Version 2.3
Thanks
Addendum…
After looking through the article for the original version I found a comment from Dave (#107) which has cured the problem.
I don’t know if this fix is specific to Version 2.3 but it worked for me.
Make the first line after ‘onTouchStart: function(e) {’ read as follows…
if(e.target.tagName != ‘SELECT’) e.preventDefault();
That’s all it needs.
..
question.
I’ve been loading data into an iscroll div with jquery to prevent from having 100 iscrolls.. and I just noticed that when you load new data it’s at the same scroll position as before even though all the markup in the div is new..
This would be ok but the problem is that is you’ve scrolled to the bottom , and then loaded new data with less height.. it’s completely blank and you can’t scroll back up ..
I’ve tried everything I could think of to scroll back to the top when loading new data but to no avail .
Any suggestions?
nm,
can add as many divs within the iscroll as needed, so can just swap displays on the divs within the iscroll div if heights are off
Hello,
is that a bug? i want to load more content in the iscroll but i can’t scroll to the end because the iscroll isn’t grow.
@Bartman
I wasn’t having trouble with what you’re describing.
the div you’re using is probably hardcoded height,
add another innermost div to the iscroll that does not have height attribute and load or append your data to That div instead.
Thanks for such a great tool. I am wondering if anyone has solved the problem I’m currently having. I’m trying to build a little page that mimics the demo but only with horizontal scrolling. Once the user would scroll all the way to the end I have an ajax call to populate the “scroller” div with the next batch of data. The problem is with resizing the “scroller” div once I’ve added the new data. I figure that I need to reinitialize the iScroll for the change in width to take effect. Played around a bit but I haven’t found a solution to this that didn’t cause the page to break. Does anyone have an idea on how to do this or point me in a direction?
duh I got it… refresh() does the trick.
@Chris: thats was my problem to. refresh(); Now the iScroll works with Ajax
@dan: Did you find a solution for locking horizontal/vertical movement? This is a big issue with the new version I think..
Hi I’m very impressed by your job,
although I have a few problems. Let me explain: I’m using Jqtouch and only the javascript and css in the index.html works. In my case I would like to create another html linked to the index.html. But when I do that the iscroll does fixe the tab bar but I can’t move mt text anymore. Would you have an idea why?
Ahead, here is how you can fix it:
- var leftDelta = e.targetTouches[0].clientX - this.startX;
- var topDelta = e.targetTouches[0].clientY - this.startY;
+ var leftDelta = 0;
+ var topDelta = 0;
+
+ if (this.scrollX && this.scrollbars.x) {
+ leftDelta = e.targetTouches[0].clientX - this.startX;
+ }
+
+ if (this.scrollY && this.scrollbars.y) {
+ topDelta = e.targetTouches[0].clientY - this.startY;
+ }
This will only enable iscroll to only care about x/y movements in touchmove if the respective scrollbars were enabled. It should fix your issue…
@Bartman: another way of fixing ajax/refresh problems is to put a call to refresh() at the beginning of the onTouchStart function. Basically, make it look like this:
onTouchStart: function(e) {
this.refresh();
…
So you won’t have to care about calling refresh() when your things finally came in from the server. This is quite annoying because the view shouldn’t know when it’s done populating.
@Pascal: Thanks a lot, I’ll give it a try
What’s up with this javascript?
141: get x() {
Is that a mistake, or maybe it’s Safari/iPhone specific?
Once i use this with like a list of items (clickable) once i slightly touch one its scrolls to the top. Thats kinda irritating, is there a fix?
Has anyone using this script faced flicker issues when you have a lot of rows to be displayed in the div?
As already said, I’m working on a whole framework for iPhone. I’m rewriting the scroller at the moment. You can see a preliminary version online at http://tr.im/QKuz (on your iphone, android or simulator). I’ll post more details about the framework in the coming days.
[...] von cubiq.org hat meines Wissens hier die am einfachsten zu verwendende Arbeit abgeliefert: iScroll Ein JavaScript Objekt, daß mit einem Einzeiler beliebige Elemente mit einem Finger scrollbar [...]
[...] Hard to make a scrollable region on the page. This leads to tracking down some sort of JS workaround. For example: http://cubiq.org/scrolling-div-for-mobile-webkit-turns-3/16 [...]
Thanks a lot for this solution!
I was wondering how I could toggle the scroll-ability of an iScroll on and off, I’m still new to jQeury and tried different tactics, but it just doesn’t seem to work.
[...] iScroll iScroll has been updated, though as its developers admit, it is not ready for a production environment. iScroll allows iPhone, Android and Palm Web apps to scroll inside an overflow:hidden div via CSS. [...]