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?
EDIT:
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.
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;
});