iScroll won't scroll horizontally until zoomed

Question

I'm using iScroll 4 (cubiq.org/iscroll-4) in a JQTouch iPhone-application built with Phonegap/Cordova.

My problem is that the horizontal scrolling, although 'hScroll: true', is not enabled until I zoom my image in and out, which makes everything work fine (confirming that the iScroll works and the CSS of the wrapper/scroller are correct).

HTML:

<div id="wrapper">
    <div id="scroller"></div>  // Also tried with img-tag in div instead of as bg
</div>

CSS:

#wrapper {
position:absolute;
top:45px; bottom:0; left:0; // 45px is header
z-index:1;
width:100%; // Also tried with window size (320)
overflow:auto; // Also tried with scroll
}

#scroller {
position:absolute; z-index:1;
width: 1024px; // The size of my image
height: 414px; // The height of my image
background: url(img/test.png) no-repeat;
padding: 0;
}

JAVASCRIPT:

var myScroll;
function loaded() {
    myScroll = new iScroll('wrapper', {
                             hScrollbar: true,
                             vScrollbar: true,
                             hScroll: true,
                             vScroll: true,
                             zoom: true
                             });
}

Changing the parameters of 'vScroll' and 'zoom' has the desired effects right away. Parameters related to horizontal scrolling does nothing until after zooming has fired it.

I tried refreshing the wrapper or scrolling to a coordinate after load, editing the loading order of my app, but nothing helps.

Thanks for your time, Andreas.

Did you ever solve this question? I would be fascinated to know the answer, as I'm having a similar issue. — Lucas Wiman, Dec 14 '12 at 03:26

score 0 · Answer 1 · answered Aug 07 '12 at 18:55

0

You need to manually enable the hScroll option.

In each of my divs which need to be zoomed, I include the following code:

data-iscroll='{"zoom":true, "hScroll":true }'

answered Aug 07 '12 at 18:55

pawl

354
4
14

Thanks for your reply. I didn't see anything about this in the iScroll documentation or demo. I'm not sure if it would work for me, as I decided to rebuild my app from scratch - but hopefully it might help others in this situation. Thanks again! – Andreas Aug 09 '12 at 10:02
I went back and tried this solution, and it did not help. Also edited my question to further explain my issue. – Andreas Sep 01 '12 at 12:54

score 0 · Answer 2 · edited Aug 31 '12 at 22:20

0

It could be because of the wrapper div width being smaller than the scroller div width every time.

edited Aug 31 '12 at 22:20

ЯegDwight

24,821
10
45
52

answered Aug 31 '12 at 09:18

Javed Shaikh

1

I edited the question after your comment, but concerning the CSS, I have tried pretty much every solution I can think of - all with the same result. Thanks though. – Andreas Sep 01 '12 at 12:55

score 0 · Answer 3 · answered Jan 30 '14 at 04:15

I had a similar issue except that the image element wouldn't scroll at all until a zoom or a window resize. The issue turned out to be related to DOM updates. I was creating the scroller on an element that was hidden at the time. When it was later made visible the scrolling wasn't working. Turns out I had to show and then refresh the scroller.

You can find more info here: http://iscrolljs.com/#refresh

Example code:

ajax('page.php', onCompletion);

function onCompletion () {
    // Update here your DOM

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

iScroll won't scroll horizontally until zoomed

3 Answers3