willmcpo / body-scroll-lock

Body scroll locking that just works with everything 😏
MIT License
4.04k stars 338 forks source link

Allow access to native event in 'allowTouchMove' #226

Closed lincolnthree closed 3 years ago

lincolnthree commented 3 years ago

In order to facilitate more advanced types of event detection / decision-making when allowing touchmove events, it is sometimes necessary to have access to the Event itself in certain scenarios. For example, detection of Pen / Stylus (see example below), or if you want to use touch X/Y position instead of element.

(Currently B.S.L. breaks all stylus touches, and the only way I've figured out to fix it is to disable BSL on stylus touch events.)

That may be worth a separate issue in itself, but I still think there's value in exposing the native event regardless, since it would allow for much finer grained control over 'allowTouchMove' behavior.

        disableBodyScroll(mainElmt, {
          allowTouchMove: (el: HTMLElement, e: Event) => {
            const touch = e as TouchEvent;
            if (touch.touches?.[0]?.touchType === 'stylus') {
              return true;
            }
            // ...
          },
        });

The proposed changes should be backwards compatible. And, if it helps, we've been running this in production on over 100,000 devices so far with no issues on any platform/browser.

diachedelic commented 3 years ago

Thanks @lincolnthree , that's a good idea. Watch #227 for progress.

lincolnthree commented 3 years ago

@diachedelic Sounds good. If you like how I implemented things in the PR, I wouldn't mind if you added me to the contributors or commit log. No big deal though.