Horizontal scroller on Chrome Android prevents vertical scrolling within element

[JamesWilmot]

Problem

A horizontal scroller on android won't allow page scroll down inside the element.

Greatly degrades UX on Android for any thumbnail scroller higher than 25vh.

Problem doesn't affect Safari on IOS.

Recreating

1. Open http://codepen.io/jameswilmot/full/waYXEJ in chrome
2. Open dev tools
3. Toggle device mode and select Nexus 4 or 5
4. Attempt to touch up and down within scroller

Environment thumbnail-scroller configuration:

$(window).load(function(){
$("#my-thumbs-list").mThumbnailScroller({
  axis:"x", 
  type: "hoverprecises"
});
});

Environment link: http://codepen.io/jameswilmot/pen/waYXEJ

Suggested Solution

Split touch move delta into x and y components for only x-axis type. Component x is passed to horizontal scroller and y component given to user supplied selector (with body being default.) Example:

$(window).load(function(){
$("#my-thumbs-list").mThumbnailScroller({
  axis:"x", 
  type: "hoverprecises",
  verticalScroll: "#someContainer"
});
});

Note: don't like attribute name but it's what I could come up with very quickly.

I'm pretty keen to submit a patch if you can give me a few pointers.

Thanks for project and all the work you have put in.

[malihu]

Hi,

This should be fixed in version 2.0.3 (just released). No extra attributes required... it should just work.

[JamesWilmot]

Excellent! Thanks heaps!

Just testing now.

[JamesWilmot]

At the moment I can't recreate fix, unfortunately.