Jumps back to top after scrolling

[jrotondo]

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]

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]

>
>     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]

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]

I'd need to see your code. It sounds like a CSS issue.

Matteo

[Olivier Faure]

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]

i do have this problem as well, is there any solution ?

[couloir007]

I'm having the same issue.

[Well Bishop]

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]

Exact same problem here as well.

Just a static page, no DOM changes.

Using iScroll with jQuery Mobile.

[dough boy]

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]

The direct elements you are trying to snap to must have some height.

[Katie Marcotte]

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]

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]

I had to move back to the 3.7.1 version to get it to stop this.

 

BML

[nevf]

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.

[mwd]

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]

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:

[Gregory Sinet]

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