scrollSensitivity not working?

[fritzmg]

Due to a fixed header, I increased the default scrollSensitivity from 30 to 100 (fixed header is only (50px high). However, the settings does not seem to have any effect. I still have to reach the default 30 pixels to either edge, in order for the auto-scrolling to start. Are there any known problems with this setting?

It works fine with version 1.7.0, but not in version 1.8.1.

[owen-m1]

@fritzmg There is no issue I am aware of. If you are using native drag and drop (no forceFallback: true is set and not on mobile) then the Sortable's autoscroll function is not invoked, because Chrome and Firefox already implement this feature. To get around it for now you can use forceFallback: true, however you will lose the ability to use the native DnD API.

As well, there is always the option of making the navbar a div above your main page container, rather than fixed inside it.

[fritzmg]

@fritzmg There is no issue I am aware of. If you are using native drag and drop (no forceFallback: true is set and not on mobile) then the Sortable's autoscroll function is not invoked, because Chrome and Firefox already implement this feature. To get around it for now you can use forceFallback: true, however you will lose the ability to use the native DnD API.

Oh I see, I am assuming the scrollSensitivity only applies, when the fallback is in use? Because otherwise the browser uses its own thresholds, presumably.

[owen-m1]

@fritzmg Yes, when the fallback is in use but also in IE and Edge, since their autoscrolling with drag and drop is minimal or nonexistent

[fritzmg]

Ok, makes sense :)

[Backoo]

I'm using SortableJS with the Sticky Navigation, Top Bar of Foundation 6.5.1 and tried the following settings:

Sortable.create(grid, {
  forceFallback: true,
  handle: '.handle',
  draggable: '.draggable-cell'
});

The result is:

• It does scroll top on Firefox, Chrome and Safari desktop.
• It doesn't scroll top on Firefox, Chrome and Safari mobile, even if no sticky top bar is used.

P.S.: SortableJS has the option fallbackClass: "sortable-fallback" ("Class name for the cloned DOM Element when using forceFallback") that I didn't understand whether and how to use for this issue.

[owen-m1]

@Backoo Could you make a jsbin showing this problem? The only problem I know with autoscrolling on mobile is that it does not work when the page is zoomed in.

Also, fallbackClass is the class set on the "ghost" that appears under the mouse when dragging begins if forceFallback is enabled. So not really applicable to this issue.

[Backoo]

@owen-m1 See this jsbin.
Note: The Foundation top bar itself seems do not sticky within jsbin.

[owen-m1]

@Backoo The auto scroll works for me on Chrome Android. What device are you using?

[Backoo]

@owen-m1 I'm using iPhone 5 and iPad Air.

[owen-m1]

@Backoo Try master

[Backoo]

Good!
I confirm the issue is solved on Firefox, Chrome and Safari mobile for iPhone 5!
Thanks

[trullock]

I just spent hours debugging this. Can we please improve the documentation for AutoScroll to make it clearer what native vs fallback scrolling are and when they apply, and how the scrollSensitivity and speed dont apply in native mode?

[owen-m1]

@trullock Yes, I just improved it

[cain]

I just spent hours trying to figure out why scrollSensitivity wasn't working haha. My bad should've read the docs better.

Not sure why I didn't get it

[luyiyilll]

However, setting forcefallback to true will prohibit the default behavior of the browser. When Firefox is dragged, a new window will be opened. Is there a solution?

[applibs]

I have some buttons Inside my draggable element. After I set forceFallback: true, thet these buttons not work on click, because this function will block it:

if (ignoreNextClick) {
        evt.preventDefault();
        evt.stopPropagation && evt.stopPropagation();
        evt.stopImmediatePropagation && evt.stopImmediatePropagation();
        ignoreNextClick = false;
        return false;
      }

After inserting my specific element into filter option, then its OK.