b0Gd4N b0Gd4N - 2 months ago 22
CSS Question

Mobile navbar horizontal scroll on Skrollr page

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.

enter image description here

Answer

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; });