スマホで独自のスクロールエリアといえば iScroll 4 は定番ですが、画面の大部分を覆うような横スクロールエリアを持つレイアウトの場合、縦に長いページを上下にネイティブスクロールできなくなります。

そういうときは、onBeforeScrollStart() をオーバーライドして iScroll 4 の e.preventDefault() を無効にした上で、onBeforeScrollMove() で横スクロールのみ e.preventDefault() すれば、意図が実現できます。e.preventDefault() の実装位置は、iScroll 4 のバージョンによって違うらしいので、注意!

var myScroll = new iScroll( 'wrapper', { hScroll: true, vScroll: false, hScrollbar: false, onBeforeScrollStart: function(e) { // cancel e.preventDefault() }, onBeforeScrollMove: function(e) { if (this.absDistX > (this.absDistY + 5)) { e.preventDefault(); } } } );