I've downloaded iScroll and I am using the horizontal scroll. Works great except that if the content and the "horizontal scrolldiv" is longer than the device screen, you can't scroll down to see the content below the horizontal scroll. How can i solve that?

Downloaded from: Using code in: examples/horizontal-scroll

I've downloaded iScroll and I am using the horizontal scroll. Works great except that if the content and the "horizontal scrolldiv" is longer than the device screen, you can't scroll down to see the content below the horizontal scroll. How can i solve that?

Downloaded from: http://cubiq/iscroll Using code in: examples/horizontal-scroll

• javascript
• ios
• scroll

• Did you set both hScrollbar and vScrollbar to true? – DA. Commented Nov 24, 2011 at 7:45
• Yup! You can see an example here: bristolhotel./pizzeria/mobil/pizza.php but off course you won't see the problem on the puter. – jessifelt Commented Nov 24, 2011 at 14:41
• Did you ever solve this, got the same problem? – Oliver Pearmain Commented Mar 5, 2012 at 9:49
• @HaggleLad did you ever got the answer? I am also facing the same issue. – Akshat Goel Commented Jun 13, 2012 at 12:58
• Yep just added an answer – Oliver Pearmain Commented Jun 14, 2012 at 8:28

3 Answers 3

I had to customize iScroll.js to make this work. Here's the changes I made

(Please note these line numbers refer to iScroll v4.1.9)

line 100: onBeforeScrollStart: function (e) { e.preventDefault(); },

change to: onBeforeScrollStart: function (e) { /* e.preventDefault(); */ },

line 106: onTouchEnd: null,

change to: onTouchEnd: function (e) { e.preventDefault(); },

line 390: timestamp = e.timeStamp || Date.now();

insert below: if( Math.sqrt( deltaX*deltaX ) > 5 ) { e.preventDefault(); }

In addition to this to get the scroll bar to appear where I wanted I had to make the following change:

line 218: else bar.style.cssText = 'position:absolute;z-index:100;' + (dir == 'h' ? 'height:7px;bottom:1px;left:2px;right:' + (that.vScrollbar ? '7' : '2') + 'px' : 'width:7px;bottom:' + (that.hScrollbar ? '7' : '2') + 'px;top:2px;right:1px');

change to: else bar.style.cssText = 'position:relative;z-index:100;' + (dir == 'h' ? 'height:7px;bottom:7px;left:2px;right:' + (that.vScrollbar ? '7' : '2') + 'px' : 'width:7px;bottom:' + (that.hScrollbar ? '7' : '2') + 'px;top:2px;right:1px');

Hope this helps!

If you are using iScroll 4, this can be fixed by setting onScrollStart to null when initializing.

Example:

var scroller = new iScroll('wrapper', { onBeforeScrollStart: null });

Here's the solution (from http://gist.github./hotmeteor/2231984):

var point, pointStartX, pointStartY, deltaX, deltaY;
var scroller = new iScroll('scrollerId', {
    vScroll: false,
    vScrollbar: false,
    hScrollbar: false,
    snap: 'li',
    momentum: false,
    onBeforeScrollStart: function(e) {
        point = e.touches[0];
        pointStartX = point.pageX;
        pointStartY = point.pageY;
        null;
    },
    onBeforeScrollMove: function(e) {
        deltaX = Math.abs(point.pageX - pointStartX);
        deltaY = Math.abs(point.pageY - pointStartY);
        if (deltaX >= deltaY) {
            e.preventDefault();
        } else {
            null;
        }
    }
});

Sadly, you can't lean on iScroll's internal absDistX and absDistY, because (for whatever reason), they are updated too late.