When scrolling down iscroll-lite pulls back to top on iphone

1,773 views
Skip to first unread message

cyrilm...@hotmail.com

unread,
Jun 23, 2011, 5:59:33 PM6/23/11
to isc...@googlegroups.com
Hi!
 
Im using iscroll-lite for a fixed header bar...
I'm almost there but when i scroll down on my iphone i get pulled back to the top instantly. Tried many things but no solution yet. Hope someone can help!
 
My code:
 
html:
 
<head>
<script type="application/javascript" src="/script/iscroll-lite.js"></script>
<script type="text/javascript">
    var myScroll;
    function loaded() {
        setTimeout(function () {
            myScroll = new iScroll('container');
        }, 100);
    }
    window.addEventListener('load', loaded, false);
</script>
   
</head>
<body>
    <form id="form1" runat="server">
    <div class="mainContainer">
        <div class="fixed-header">
            <ul>
                //fixed content
            </ul>    
        </div> 
        
        <div id="container">
            <div id="scroller">
                //scrollable content (page) consists of several divs and ul's
            </div>
        </div>
    </div>
</body>
 
 
My CSS:
*
{
	margin:0px;
	padding:0px;
}
 
html, body, form
{
	margin:0px;
	padding:0px;	
}
 
	
body 
{
	min-width:310px;
	font-family:Helvetica, Arial Rounded MT Bold, Trebuchet MS;
	height:100%;
}
 
.fixed-header
{
	position:absolute; z-index:2;
	top:0; left:0;
	width:100%;
	height:45px;
	line-height:45px;	
	padding:0;
	color:#eee;
	font-size:20px;
	text-align:center;    
	text-shadow: 0 -1px 0px rgba(0,0,0,0.3);
	background-color:#222;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #444), color-stop(1, #222));
	background-image:-moz-linear-gradient(top, #999, #444 2%, #222);
	background-image:-o-linear-gradient(top, #999, #444 2%, #222);
}
  
.mainContainer
{
	width:100%;
	min-height:100%;
	position:relative;
}
 
#container
{
	width:100%;
	overflow:auto;
	position:absolute; z-index:1;
}
 
#scroller
{
	padding:55px 10px 10px 10px;
}

 
Thanks for checking it out!
 
Cyril
    

Chris C

unread,
Jun 27, 2011, 12:15:39 PM6/27/11
to iScroll
At first glance it all looks ok. I would suspect that your iscroll-
lite.js is not loading. Can you see it in the DOM?

emanuel doneda

unread,
Jun 29, 2011, 9:07:25 AM6/29/11
to isc...@googlegroups.com
Hi,

The first thing i would suggest you to check (apart from putting some console.log in the key point) is that the scroller is loaded after all of the DOM is actually ready.

What i like to do is to save a global handler for my scroll, like this:

var myscroll;

function (){
myscroll=new iScroll('div');
}

Then add a simple button where you can click to call the reftresh() method, like this <p onclick="myscroll.refresh()/>  and try to hit it after all of you async calls and then try the scroller again.

HTH!

Michael Sweeney

unread,
Jul 3, 2011, 10:26:41 PM7/3/11
to isc...@googlegroups.com
I'm having this same issue using phonegap. I'm using the refresh method after every innerHTML change and I'm not able to scroll at all. So far nothing has worked :(

Michael Sweeney

unread,
Jul 3, 2011, 11:59:29 PM7/3/11
to isc...@googlegroups.com
I figured it out! I added a height to the wrapper in my css and it worked fine. Hope that fixes your problem too!

Matt Connolly

unread,
Jul 24, 2011, 9:58:16 PM7/24/11
to isc...@googlegroups.com
I'm having the same problem. The page scrolls with your finger, but after you let go of your finger, the page scrolls back to the top.

I've placed a button on the page calling "iscroll.refresh()" and I'm still getting the same thing.

Michael, what height did you use for your wrapper div?

nanda kishore

unread,
Jun 21, 2012, 4:03:21 AM6/21/12
to isc...@googlegroups.com
In Case none of the hacks work,
you can comment out "that.scrollTo(resetX, resetY, time || 0);"
in _resetPos function in the file iscroll.js

Drawback:
It will not bounce back to top in some cases.
Reply all
Reply to author
Forward
0 new messages