SortableJS
No horizontal auto scrolling on mobile PWA
Thank you for the great SortableJS! I am using it in my progressive mobile web application (PWA). I have a simple sortable with a few vertically stacked items in it. I can drag'n'drop those items from top to bottom. Auto scroll works fine.
But when I drag the ghost to the very right, the mobile HTML page in iOS Safari starts a horizontal auto scroll. That shoud not happen in a PWA.
How can I disable horizontal auto scrolling, while keeping vertical auto scrolling?
Ok I found what needs to be changed in the source code. There even already is a variable to configure this: canScrollX, canScrollY.
https://github.com/SortableJS/Sortable/blob/e02baa8ebb2a71e93d61c1281ae63e286212ee78/plugins/AutoScroll/AutoScroll.js#L225
Only need to adapt this, so that this variable can be set via configuration...
@Doogiemuc This sounds reasonable.
A variable called scrollDirection: "vertical" | "horizontal" | "both", defaulting to "both".
How does that sound?
I'm in the same situation. The new variable sounds great. Has this been released yet? I'm using Sortable 1.10.2 and neither scrollDirection:'vertical' nor direction:'vertical' seem to prevent the unwanted side-scrolling. Thanks!
We have the same issue in our application. It does not seem that adding a variable solves the problem in general (although the availability of such an option will not be superfluous). The problem is that we are able to drag the card infinitely far beyond the workspace both horizontally right and vertically down.
I'm hitting the same issue on our application. @waynevanson is there any update on this problem? Your proposed variable sounds like a good solution.
To fix this overflow problem just add this in your css ,
html, body {overflow-x: hidden;}
is there still no solutions?
html, body {overflow-x: hidden;}
this is not working.
I think this is happening because when the element is being dragged, part of it is outside the viewport, which causes the browser to try and scroll towards that direction. html, body {overflow-x: hidden;} helps, but does not completely fix this on mobile browsers for me.
To solve this, I used a dnd library that does not rely on the native browser API
