watusi / jquery-mobile-iscrollview

JQuery Mobile widget plug-in for easy use of the iScroll javascript scroller.
408 stars 183 forks source link

iScrollView Choppy Scrolling with large content within <div class="iscroll-content"> #121

Closed TorchMan closed 10 years ago

TorchMan commented 10 years ago

Hi,

I'm using iScrollView on my App (PhoneGap, JQM 1.3, Android). Excellent work on this. It's a gem. Actually im testing on a Samsung Galaxy S3. My first page is large in vertical dimension (round about 6000px) consisting out of a bunch of <div> containers with images (with external src). These DIV - containers are dynamicly added to the content div, based upon Json-data. Then i'm doing a refresh. What i've noticed is, when omitting the data-iscroll attribute in my content <div> , scrolling is much smoother and not choppy at all. But when adding the data-iscroll attribute to the content-DIV, scrolling is choppy. First i thought it was because of the anchor-tag's or the images, so i replaced the div-containers with spans and put some text to it. I copied about 30 spans and watched how scrolling behaves. It is choppy - even though with spans. Then i took just 15 spans and scrolling was a bit smoother. It has something to do with the amount of containers within the content-div.

My markup looks in a more simplified form like this:

<div data-role="content" data-iscroll class="iscroll-wrapper">
    div class="iscroll-scroller"
        div class="iscroll-content"
          pThis is some content that I want to scrollp
          <p>This is some content that I want to scroll</p>
          <p>This is some content that I want to scroll</p>
          <p>This is some content that I want to scroll</p>
          <p>This is some content that I want to scroll</p>
          <p>This is some content that I want to scroll</p>
          <p>This is some more content</p>
          ... more content up to 6000px in vertical direction
        </div>
    </div>
</div>

Can anyone confirm this behaviour? Is there a workaround available?

I appreciate any kind of help. This is really urgent. Maybe i've missed something.

Many thanks in advance, sincerely TorchMan

jtara commented 10 years ago

When not using iScroll, the scrolling you see is generally native scrolling. You are scrolling the entire webview using native scrolling. iScroll is never going to approach native scrolling speed.

Yes, it is important to minimize the number of elements and complexity of the HTML that you scroll. I've found it helpful, for example, to use a plain list instead of a jQuery Mobile listview.

jQuery Mobile 1.4 will help a lot, because they have vastly simplified the markup for listviews and buttons.

TorchMan commented 10 years ago

Allright. THX for your answer and confirmation. At least i know now for certain, that my suggestion was right. Unfortunately i can't simplify my markup anymore a have to stick with native WebView scrolling '''-webkit-overflow-scrolling: touch;''' Concerning JQM 1.4 i'll wait till there'll be a stable version.