hammerjs / hammer.js

A javascript library for multi-touch gestures :// You can touch this
http://hammerjs.github.io
MIT License
24.11k stars 2.63k forks source link

OverflowY is interfering with Pan Gestures #1234

Open paramsinghvc opened 5 years ago

paramsinghvc commented 5 years ago

CodeSandbox Link: https://codesandbox.io/embed/hammerjsdraggeroverflowybug-wqhoe

Pan gestures are working well when there's no overflowY CSS property applied on the DOM element. But as soon as I set overflowY property to anything other than initial, it breaks the gestures.

Also, a very bizarre thing happens, the value of deltaY and deltaX increases abruptly in the end, can't find the reason for this. But if I remove overflowY property from the elements, it fixes. Reproducible in CodeSandbox, open in mobile mode only using devtools.

Screenshot 2019-09-15 at 09 08 34
    const hammered = new Hammer(el, { domEvents: false });
       hammered.get("pan").set({
         direction: Hammer.DIRECTION_VERTICAL,
         threshold: 0
    });

    const onPanStart: HammerListener = e => {
      document.body.style["overscroll-behavior"] = "contain";
    };

    const onPanMove: HammerListener = e => {

      const distance = e.distance;
      console.warn(distance, upperLimit, e);
      if (Math.abs(distance) < Math.abs(upperLimit)) {
        const movement = isDockedUp ? -(upperLimit - distance) : e.deltaY;
        el.style.transform = `translateY(${movement}px)`;
      }
    };

    const onPanEnd: HammerListener = e => {
      if (shouldPerformTouchGesture && !shouldPerformTouchGesture(e)) {
        return;
      }
      //   el.style.transition = "transform 0.1s ease-out";
      document.body.style["overscroll-behavior"] = "auto";
      if (e.distance > Math.abs(upperLimit / 2)) {
        el.style.transform = `translateY(${isDockedUp ? 0 : -upperLimit}px)`;
        isDockedUp = !isDockedUp;
      } else {
        el.style.transform = `translateY(${isDockedUp ? -upperLimit : 0}px)`;
      }

Please suggest a solution to this problem. Are overflowY and touch gestures incompatible with each other? Couldn't find any reference.

briancodes commented 4 years ago

I tried your codesandbox demo - the panning (dragging the section up/down) seems to work ok with overflow-y: scroll on the <section>Hola Mundo</section> element - Chrome Version 79 Windows 10

It starts to slows down a lot after dragging up and down a few times, but maybe that's probably implementation specific (or just that it's slow running within the sandbox setup)