Jumps back to top after scrolling

7,964 views
Skip to first unread message

jrotondo

unread,
Sep 27, 2010, 5:14:55 PM9/27/10
to iScroll
I've got an iScroll on an ajax page. The scrolling works, but jumps
back to the top of the content after momentum stops. For the life of
me I can't figure out why it's hopping back to the top of the content.
I've tried everything from turning snap off, setting checkDOMChanges
to false, refreshing the scroller. Any ideas why it could be doing
this?

My code right now:

$.fn.callScroller = function(vari1, vari2, vari3) {
document.addEventListener('touchmove', function (e)
{ e.preventDefault(); }, false);

if($('#scrollcontent').length > 0) {
var myScroll = new iScroll('scrollcontent', {vScrollbar: true,
checkDOMChanges: false});
setTimeout(function () { myScroll.refresh() }, 0);
}
}

T B

unread,
Sep 27, 2010, 11:20:39 PM9/27/10
to iScroll
I have the exact same problem. I have a scrollable element and every
time I scroll it, it snaps back to the top as if there is not content
in the element.

I can provide markup and code if needed.

Matteo

unread,
Sep 28, 2010, 3:42:49 AM9/28/10
to iScroll
>
>     if($('#scrollcontent').length > 0) {
>         var myScroll = new iScroll('scrollcontent', {vScrollbar: true,
> checkDOMChanges: false});
>         setTimeout(function () { myScroll.refresh() }, 0);
>     }

Why are you calling refresh() after initialization? There's no need
of that.

Matteo

jrotondo

unread,
Sep 28, 2010, 2:31:24 PM9/28/10
to iScroll
I was simply trying everything to get this to work properly. With or
without the refresh, the region still snaps back to the top of the
content after momentum rolls off. Any ideas Matteo?

Thanks,
John

Matteo

unread,
Sep 29, 2010, 3:03:20 AM9/29/10
to iScroll
I'd need to see your code. It sounds like a CSS issue.

Matteo

Olivier Faure

unread,
Oct 27, 2010, 9:51:04 AM10/27/10
to iScroll
I found that the scrolling area jumps back to top if there's a
position:absolute inside the block and perhaps with other css
properties. i have the trouble when i mix iScroll with WebApp.Net
framework. i have to remove position:absolute for class .iLayer

A R

unread,
Apr 12, 2011, 4:31:04 PM4/12/11
to isc...@googlegroups.com
i do have this problem as well, is there any solution ?

couloir007

unread,
Mar 13, 2012, 4:17:53 PM3/13/12
to isc...@googlegroups.com
I'm having the same issue.

Well Bishop

unread,
Mar 14, 2012, 3:01:53 PM3/14/12
to isc...@googlegroups.com
I've found a way to fix the problem, but the bounce effect will not work.

Just go to iscroll.js, look for:

94> // Snap
95> snap: false,
96> snapThreshold: 0,

And set "snap" to "true".

If anyone knows how to restore de bounce effect, I'll be pleasured....

Bye!

Tom Schouteden

unread,
Apr 4, 2012, 3:46:24 AM4/4/12
to isc...@googlegroups.com
Exact same problem here as well.
Just a static page, no DOM changes.
Using iScroll with jQuery Mobile.

dough boy

unread,
Apr 5, 2012, 8:00:31 AM4/5/12
to iScroll
When it happened to me it was because I didn't have my HTML set up
exactly like the example (i.e. not in 2 divs). Once I set my HTML to
be identical to the example it worked. I was then able to tweak the
example for different ids & classes, etc.

mystrdat

unread,
Apr 5, 2012, 9:53:06 AM4/5/12
to isc...@googlegroups.com
The direct elements you are trying to snap to must have some height.

Katie Marcotte

unread,
Apr 5, 2012, 10:18:26 AM4/5/12
to iScroll
I had the same problem and tried to fix it for days. I found a
solution to my rubber band issue.

If you are hiding then showing ANY parent div of the iscroll, you will
get the rubber band effect. Do not display: none on any parent div and
try to display: block on any parent div. I changed my css to move the
iscroll out of the viewing plain and moved it back in on a click. It
is the same effect as hide/show or display:none/display:block, only it
is not messing with the DOM.

Hope this helps some of my fellow iscrollers! Onward!

Filip Stanek

unread,
Apr 5, 2012, 1:05:23 PM4/5/12
to isc...@googlegroups.com
I was having the exact same issue (hiding a parent div caused the problem ).  I fixed it by calling the refresh method on iScroll after the div is visible.

BigMikeL

unread,
Apr 10, 2012, 6:43:34 AM4/10/12
to isc...@googlegroups.com
I had to move back to the 3.7.1 version to get it to stop this.
 
BML

nevf

unread,
May 23, 2012, 10:39:29 PM5/23/12
to isc...@googlegroups.com
I was having the same problem where it would scroll back to the top. It turned out this was happening because I instantiated the iScroll before all content was loaded. In my case content is dynamically loaded,  so using ONDOMCONTENTLOADED was useless. HTH someone.
Message has been deleted

mwd

unread,
Apr 26, 2013, 6:52:06 AM4/26/13
to isc...@googlegroups.com
i have your same problem: content dynamically loaded. I tried your solution by moving the script that creates the iscroll after the div with dynamic content, but does not work.

<div id="events" style="height:65%;width:100%;overflow:scroll;background-color:#323033;">
            <div id="wrapper">
                <ul id="list_events" style="padding:0px;margin:0px;">
               
                </ul>
            </div>
        </div>
       
        <script>
            var myScroll;
            function loaded() {
                myScroll = new iScroll('wrapper');
            }
            document.addEventListener('DOMContentLoaded', loaded, false);
        </script>

Have you done the same thing or different?

mwd

unread,
Apr 26, 2013, 9:07:37 AM4/26/13
to isc...@googlegroups.com
I've solved the problem by inserting this code:

setTimeout( function(){
                      myScroll.refresh() ;
                    } , 100 ) ;

after
loading the dynamic content. In this way the height of "myscroll" is recalculate.


Il giorno giovedì 24 maggio 2012 04:39:29 UTC+2, nevf ha scritto:
Message has been deleted

Gregory Sinet

unread,
Oct 3, 2013, 3:42:22 PM10/3/13
to isc...@googlegroups.com, jroto...@gmail.com
This trouble happend to me to. It's just becaus i use a double screen. If you change screen, it work perfectly. Maybe a video problem.

Chek it, it work for me

Greg
Reply all
Reply to author
Forward
0 new messages