javascripthtmlcssparallaxskrollr

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


Solution

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