iScroll no longer works on iPad, keeps snapping back into place

570 views
Skip to first unread message

Sillysoft

unread,
Dec 31, 2010, 1:47:02 PM12/31/10
to iScroll
I am using iScroll on the ipad and it was working for awhile but now
for some reason it doesnt work in portrait. When I try to scroll in
portrait mode the scroll portion starts to scroll but then it snaps
back to the top of the page. If I turn it in landscaping mode it
scrolls just fine. Here is the code. I dont know if this was an issue
either but I recently upgraded my ipad to the newest OS:

var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(ipad)/);

if(agentID) {

var myScroll;
var a = 0;
function loaded() {
setHeight();

myScroll = new iScroll('ipad_scroller',
{desktopCompatibility:true});
}

// Change wrapper height based on device orientation. Not strictly
needed by iScroll, you may also use pure CSS techniques.
function setHeight() {
var headerH = document.getElementById('ipad_header').offsetHeight,
footerH = document.getElementById('ipad_footer').offsetHeight,
wrapperH = window.innerHeight - headerH - footerH;
document.getElementById('ipad_wrapper').style.height = wrapperH +
'px';
}

// Check screen size on orientation change
window.addEventListener('onorientationchange' in window ?
'orientationchange' : 'resize', setHeight, false);

// Prevent the whole screen to scroll when dragging elements outside
of the scroller (ie:header/footer).
// If you want to use iScroll in a portion of the screen and still
be able to use the native scrolling, do *not* preventDefault on
touchmove.
document.addEventListener('touchmove', function (e)
{ e.preventDefault(); }, false);

// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);

}

Here is the css:

#ipad_header {
width:100%;
height:250px;
}

#ipad_footer {
width:100%;
height:48px;
padding:0;
border-top:1px solid #444;
}

#ipad_wrapper {
height:200px;
position:relative;
z-index:1;
width:100%;
overflow:scroll;
}

#ipad_scroller {
-webkit-touch-callout:none;
float:left;
width:100%;
padding:0;
}

Martin Barker

unread,
Jan 5, 2011, 11:55:07 AM1/5/11
to iScroll
I have the same problem other then i'm on the iPhone 4 and locked the
phone to lanscape view but it still just snaps back to place i think
its some thing to do with the content changing inside my scroller div

Martin Barker

unread,
Jan 6, 2011, 6:40:42 AM1/6/11
to iScroll
Found the Fix,

You need to have your content inside a div inside the iScroll enabled
div.

E.G

<div id="scroll">
<div id="content">
<!-- Content you want to scroll here -->
</div>
</div>
<script type="text/javascript">
scroll = new iScroll('scroll', {desktopCompatibility:true});
</script>

Then it should work but there is a problem with resizing the content
div and the scroller not resizing with it.

michael....@gmail.com

unread,
Feb 9, 2011, 7:09:09 PM2/9/11
to isc...@googlegroups.com
Exactly my problem as well, thank you!
Reply all
Reply to author
Forward
0 new messages