search

FL3NKEY / scroll-lock

🔨 Cross-browser JavaScript library to disable scrolling page
MIT License
273 stars 37 forks source link

Normal Apple pencil events partially blocked #12

Open melvinroest opened 5 years ago

melvinroest commented 5 years ago

I'm sorry for the way I'm going to phrase things, but my knowledge is a bit limited in this area still (regarding JS events).

All of this is done on an iPad with an Apple Pencil.

I have a URL with a custom onclick event. The thing is, when I call disablePageScroll(), then the click event doesn't fire anymore (I am pretty sure it's the click event, I didn't check though, but my anonymous function in onclick does not get called). However, the link does change color, so clearly some events are still getting through.

When the page scroll is enabled, not only does the URL change color, but also the whole rectangular area briefly flashes to a black. I made a GIF of it.

I first click on "share", which flashes red (page scroll is disabled by default), then I enable page scroll by clicking on "on" (an alert shows that page scroll is enabled). I then click on "share" again and then you see a red flash and a black rectangular flash, indicating that disablePageScroll() is blocking some event.

output

Finding the culprit was simple, but I don't have any clue on what unintended side effects I get when I comment it out, but for my purposes, I did for now.

image

melvinroest commented 5 years ago

Ah, I just read that it means that you're telling the browser that you are calling e.preventDefault() and I'm not stating that I'm not doing it :P (while in the code it still happens xD)

So probably one of the two e.preventDefault() (or both) is hindering normal user interaction, in my case.

melvinroest commented 5 years ago

So it seems to be the second e.preventDefault() in the onTouchMove function.

image

I've noticed that if I turn it off, everything works fine in Chrome, but it doesn't in Safari. I can click my buttons, but I can't disable page scroll anymore.