albertogasparin/Optiscroll

Mouse drag event doesn't work on touchscreen laptops

index23 opened this issue · 13 comments

On touchscreen laptops, like Lenovo Yoga X1, mouse drag event doesn't work. You can't click or drag scroll. But touch event works. You can touch and drag scroll. I am using Chrome browser, version 59.0.3071.86

Hi @index23, does the issue only affects the custom scrollbars (so drag works with touch but not with mouse) or even something else? (as I don't have a device to test it)

Yes, you understand well. That's only affect custom scrollbars mouse drag events, while touch drag events work well . I can produce it on scrolls on official website http://albertogasparin.github.io/Optiscroll/

There is a good article about this topic, https://www.html5rocks.com/en/mobile/touchandmouse/

Hi @index23, would you mind trying out this fiddle https://jsfiddle.net/2pp3gsqq/2/?
It bundles a version with some code to handle your situation (so you should be able to drag correctly) but I cannot test it for real.

The fiddle still doesn't work for me in Firefox. The reason it works in Chrome for me is because I disabled touch events (Type chrome://flags/ in the address bar and press Enter. Click on Touch Events API > Disabled). But of course, that isn't a solution for the general public. I can confirm that enabling them causes the problem in Chrome too. I have used something like PEP (https://github.com/jquery/PEP) before for similar problems but not sure how it works...

Actually, it seems like your fiddle works fine in Chrome! Problem still exists in Firefox.

Hi @albertogasparin, I also can confirm that fiddle works in Chrome, but doesn't work in Firefox. Fiddle also works in Edge and Internet explorer 11.

Thanks guys, at least the source of the bug is confirmed.
The proposed fix relies on the PointerEvent spec, but unfortunately Firefox does not support it yet (bug status). So, I've implemented a smarter fix.

Please try this other beta version: https://jsfiddle.net/2pp3gsqq/3/

I can confirm that it's working in Chrome, Firefox, Edge and IE11. Great job!

Working here too :)

Thanks for your collaboration. Version 3.1.0 is out now 😉

Awesome, thanks so much.

Great, thanks.