Putting them out-side has one pretty big drawback - since iScroll uses css-transforms (it uses translate or translate3d) to move the inside, the iScroll-layer is flattened when scrolled - maybe its a cheap trade-off, but be aware that this makes setting different z-indexes inside and outside of the iScroll container impossible. This really bugs me, but the performance is horrible when you are moving something inside of the iScroll-container. ![]() The elements you dont want to move with the regular scroll-speed must be outside of the iscroll-container. (I really recommend Paul Irish’s on RAF which also includes a shim that falls back to a setTimeout for older browsers) I recommend doing this with requestAnimationFrame thats optimized for doing something each time the screen refreshes. Since there is no onscroll-event in iScroll we setup a continous loop that checks for the scrollPosition. (download iScroll or read more about it right here: ) Important lessons learnt iScroll listens for drag-events inside of the container and moves the inside of the container the opposite direction. But in order to make use of it you have to understand how it works… You basically set a container-element and inside that the native scrolling is disabled. Basically you just drop it in, initiate it and you have what feels like regular scrolling without the stupid limitation I explained earlier. iScroll is a javascript library that is the closest thing to feeling like native scrolling that I’ve found. ![]() So in order to make this work on any iOS device we can’t use the native scrolling. The root of the problem is that in iOS the onscroll-event, (jQuery calls it jQuery.scroll) doesn’t fire untill the scroll has stopped (and also doesn’t set the scrollPosition untill that time). But they all more or less worked the same way (somehow calculate the new position of the element every time the scroll-position changes) and had the same problem (on my iPad and iPhone they wait and then jumps after I scroll). I came across a project where I needed to do a parallax effect - where elements scroll with different speeds - so I started googling for solutions. TL:DR -> go to the bottom of the post to see the code! (demo: ) So.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |