Shopify
Scroll issue in laptops with touchscreens
Current behaviour: In this example, https://shopify.github.io/draggable/examples/simple-list.html, after pressing to drag an item the scrollbar inside the box moves up all by itself, without the user trying to drag the item up. Expected behaviour: The scrollbar should not move until the user drags the item to the top of the screen.
This, as I can see and have verified on 2/3 laptops, happens only on laptops which have touchscreens. This is happening on our app as well, which runs the beta.6 version of the library.
Browser: Chrome
The root cause maybe at line 165 of Scrollable.js -> if ('ontouchstart' in window). Using this sensorEvent.originalEvent instanceof TouchEvent at the same place, resolves the issue.
Video: https://www.youtube.com/watch?v=n4oIxkfMqXU&feature=youtu.be
@abhimediratta looks like expected Scrollable (auto scrolling) behaviour.
You are within a element that needs to be scrolled in order to see preceding/succeeding content. While dragginging, if you hold your mouse over a certain "threshold" area from the top, bottom, left, or right of that element, Scrollable will automatically start scrolling for you. Its a handy UI feature 😄
That being said, Scrollable can be disabled. So if you don't like this behaviour in your app, just take a look here on how to customize/disable it:
https://github.com/Shopify/draggable/tree/master/src/Draggable/Plugins/Scrollable
I will close this issue for now... but if I have misinterpreted your issue or if you have more to add, please feel free to reopen!
Apologies for any confusion!
Hmm, I like your suggestion with if ('ontouchstart' in window) -> sensorEvent.originalEvent instanceof TouchEvent. It will ensure that we only apply the touch logic, when the original event was touch and not if the device itself supports touch 👍
However, this may also be fixed by changing the scrollable options, particularly the sensitivity option.
@abhimediratta Open up a PR with the change if you want 🙂I can take a look!
@tsov I'll definitely open a PR with the change when I've tested the changes on a laptop with a touchscreen.
Note: This issue seems to be much worse on firefox than on chrome. For the demo page (https://shopify.github.io/draggable/) in firefox, dragging anything seems to just pull the entire page up.
On chrome it seems to work fine, and only starts scrolling once it reaches near the top/bottom of the page. I think this is intended behavior.
I have not yet tested this on my desktop to confirm its a touch laptop issue (which mine certainly is).
Confirm i can't reproduce the above on my desktop. This suggests that it is probably a firefox specific touchscreen issue.
this issue should be labeled as a "bug", not a "question". basically this bug makes draggable.js unusable on touch screens. As soon as the user starts a drag operation the window starts scrolling on itself.
playing with the scrollable options doesn't help too.
