Mobile navbar overlay horizontal scroll

[bogdancss]

My mobile navbar is position fixed at the bottom of the screen and overflows to the right. I want to be able to scroll this horizontally, however, skrollr seems to be capturing the scroll event and translating it into vertical scroll.

Once I disable skrollr, I can horizontally scroll the navbar.

I tried bringing the zindex of the navbar as high as possible, but skrollr still picks up the touch over it.

Is this possible at all?

[bogdancss]

I guess, in other words - I want Skrollr to exclude the navbar at the bottom of the screen, so when I scroll that, it doesn't scroll the whole page, but just the navbar.

I've tried stoppingPropagation on touchmove on the navbar, and does stop scrolling the whole page, but it also stops itself from scrolling horizontally.

[bogdancss]

thought to upload a sketch of what I want to achieve to make it more clear.

The overlay is position fixed, sitting at the bottom of the screen, z indexed above everything, with it's contents overflowing to the right: white-space: nowrap; overflow-x: auto; overflow-y: hidden;

On mobile, dragging the overlay starts scrolling the whole page, and the overlay is not scrolling left-right. If I use the mouse horizontal wheel, it does scroll, but not on touch.

[bogdancss]

managed to fixed this by stopping propagation on touchmove, touchstart and touchend events, on the overlay element:

$overlay.on('touchmove touchstart touchend', function(e) { e.stopPropagation(); });

this broke tapping on any links that are inside the overlay, but adding a dummy listener to them fixed it:

$overlayLinks.on('touchmove touchstart touchend', function() { return true; });