Incompatible with CSS Scroll Snap

[okaybenji]

Problem:

Without CSS Scroll Snap enabled, Sortable items can be dragged to the edge of the screen to trigger scrolling in that direction. Once CSS Scroll Snap is enabled, this no longer works.

In the JSFiddle (which uses Vue.Draggable), try dragging item A to the right. You will see that you can pick up item A and drag it, but dragging to the right edge of the screen does nothing.

Now, comment out line 11 in the CSS (scroll-snap-align: center;), save, reload, and try again. Dragging A to the right edge of the screen triggers scrolling horizontally again.

JSBin/JSFiddle demonstrating the problem:

https://jsfiddle.net/okaybenji/tfam34er/

[owen-m1]

@okaybenji I don't think your HTML is structured right in that demo. The element that you make Sortable should have the sortable items as the immediate children. You have them wrapped in a "scroll-area" div that is becoming the only draggable div.

[okaybenji]

Thanks, @owen-m1. I've made the change you suggested here: https://jsfiddle.net/h2smxqzL/

It doesn't seem to have any impact, however.

[okaybenji]

Here's an even simpler, flatter example: https://jsfiddle.net/9weod5zn/
(The behavior is the same either way.)