iNoBounce breaks horizontal scrolling

Hi, I have a DIV purposely set to scroll horizontally however with iNoBounce it breaks this feature.

You can see the CSS and HTML here.

<div class="scrolls">
                <img src="http://placehold.it/50x50" />
                <img src="http://placehold.it/50x50" />
                <img src="http://placehold.it/50x50" />
                <img src="http://placehold.it/50x50" />
                <img src="http://placehold.it/50x50" />
                <img src="http://placehold.it/50x50" />
                <img src="http://placehold.it/50x50" />
                <img src="http://placehold.it/50x50" />
                <img src="http://placehold.it/50x50" />
                <img src="http://placehold.it/50x50" />
                <img src="http://placehold.it/50x50" />
                <img src="http://placehold.it/50x50" />
                <img src="http://placehold.it/50x50" />
                <img src="http://placehold.it/50x50" />
                <img src="http://placehold.it/50x50" />
                <img src="http://placehold.it/50x50" />
                <img src="http://placehold.it/50x50" />
                <img src="http://placehold.it/50x50" />
                <img src="http://placehold.it/50x50" />
                <img src="http://placehold.it/50x50" />
              </div>

.scrolls {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 80px;
    white-space:nowrap
}
.imageDiv img {
    box-shadow: 1px 1px 10px #999;
    margin: 2px;
    max-height: 50px;
    cursor: pointer;
    display:inline-block;
    *display:inline;/* For IE7*/
    *zoom:1;/* For IE7*/
    vertical-align:top;
 }

[monokee]

I refactored and improved the approach a little by moving most of the pre-selection logic into the touchstart listener to greatly simplify the touchmove handler and further optimize performance . All that is needed for reliable results should be these two document-level event handlers (set {passive: false} in supported environments!)

// Defined outside of continuous input handlers to tame GC
let finger, el, style, overflowY, overflowX, initX, initY, atTop, atBtm, targetScrollAxis;

// document.addEventListener('touchstart', touchStart);
const touchStart = e => {
    el = e.target;
    initX = e.changedTouches[0].pageX;
    initY = e.changedTouches[0].pageY;
    atTop = false;
    atBtm = false;
    // Find scrollable element
    while (el !== document.body) {
        style = getComputedStyle(el)
        if (!style) break;
        overflowY = style.getPropertyValue('overflow-y');
        overflowX = style.getPropertyValue('overflox-x');
        // Detect scrollable elements scroll axis
        if (el.scrollHeight > el.offsetHeight && (overflowY === 'auto' || overflowY === 'scroll')) {
            targetScrollAxis = 'y';
            // Top or bottom end
            if (el.scrollTop < 1) {
                atTop = true;
            } else if (el.scrollTop + el.offsetHeight === el.scrollHeight) {
                atBtm = true;
            }
        } else if (el.scrollWidth > el.offsetWidth && overflowX !== 'hidden') {
            targetScrollAxis = 'x';
        } else {
            targetScrollAxis = '';
        }
        if (targetScrollAxis) {
            return;
        } else {
            el = el.parentNode;
        }
    }
};

// document.addEventListener('touchmove', touchMove, {passive: false});
const touchMove = e => {
    finger = e.changedTouches[0];
    switch (targetScrollAxis) {
        case 'y':
            if ((atTop && initY < finger.pageY) || (atBtm && initY > finger.pageY))
                e.preventDefault();
            return;
        case 'x':
            if (Math.abs(finger.pageY - initY) > 5)
                e.preventDefault();
            return;
        default:
            e.preventDefault();
            return;
    }
};

Tested on iOS 11.3 Safari & Chrome Expected Behavior: all iNobounce features + unrestricted horizontal scrolling + no css requirements + performance improvements

This is so trivial that I feel like I’m missing something. Would be interested in more tests and suggestions for futher improvement!

[lazd]

@himynameisubik hmm, let me know if you can hack any of the code to make it work the way it’s expected! PRs welcome.