Autoscrolling improvements #140

clauderic · 2021-03-18T16:12:45Z

Fixes #23

Auto-scrolling defaults have been updated, which should generally lead to improved user experience for most consumers.

The auto-scroller now bases its calculations based on the position of the pointer rather than the edges of the draggable element's rect by default. This change is aligned with how the native HTML 5 Drag & Drop auto-scrolling behaves.

This behaviour can be customized using the activator option of the autoScroll prop:

import {AutoScrollActivator, DndContext} from '@dnd-kit/core';

<DndContext autoScroll={{activator: AutoScrollActivator.DraggableRect}} />;

The auto-scroller now also looks at scrollable ancestors in order of appearance in the DOM tree, meaning it will first attempt to scroll the window, and narrow its focus down rather than the old behaviour of looking at scrollable ancestors in order of closeness to the draggable element in the DOM tree (reversed tree order).

This generally leads to an improved user experience, but can be customized by passing a configuration object to the autoScroll prop that sets the order option to TraversalOrder.ReversedTreeOrder instead of the new default value of TraversalOrder.TreeOrder:

import {DndContext, TraversalOrder} from '@dnd-kit/core';

<DndContext autoScroll={{order: TraversalOrder.ReversedTreeOrder}} />;

The autoscrolling thresholds, acceleration and interval can now also be customized using the autoScroll prop:

import {DndContext} from '@dnd-kit/core';

<DndContext
  autoScroll={{
    threshold: {
      // Left and right 10% of the scroll container activate scrolling
      x: 0.1,
      // Top and bottom 25% of the scroll container activate scrolling
      y: 0.25,
    },
    // Accelerate slower than the default value (10)
    acceleration: 5,
    // Auto-scroll every 10ms instead of the default value of 5ms
    interval: 10,
  }}
/>;

Finally, consumers can now conditionally opt out of scrolling certain scrollable ancestors using the canScroll option of the autoScroll prop:

import {DndContext} from '@dnd-kit/core';

<DndContext
  autoScroll={{
    canScroll(element) {
      if (element === document.scrollingElement) {
        return false;
      }

      return true;
    },
  }}
/>;

changeset-bot · 2021-03-18T16:12:49Z

🦋 Changeset detected

Latest commit: cc13c98

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@dnd-kit/core	Major
@dnd-kit/sortable	Major
@dnd-kit/modifiers	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2021-03-18T16:18:39Z

Size Change: +1.94 kB (+2%)

Total Size: 84.5 kB

Filename	Size	Change
`packages/core/dist/core.cjs.development.js`	25.4 kB	+644 B (+3%)
`packages/core/dist/core.cjs.production.min.js`	13.2 kB	+426 B (+3%)
`packages/core/dist/core.esm.js`	25.2 kB	+643 B (+3%)
`packages/sortable/dist/sortable.cjs.development.js`	4.32 kB	+92 B (+2%)
`packages/sortable/dist/sortable.cjs.production.min.js`	2.72 kB	+42 B (+2%)
`packages/sortable/dist/sortable.esm.js`	4.2 kB	+91 B (+2%)

ℹ️ View Unchanged

Filename	Size	Change
`packages/accessibility/dist/accessibility.cjs.development.js`	979 B	0 B
`packages/accessibility/dist/accessibility.cjs.production.min.js`	637 B	0 B
`packages/accessibility/dist/accessibility.esm.js`	847 B	0 B
`packages/accessibility/dist/index.js`	148 B	0 B
`packages/core/dist/index.js`	141 B	0 B
`packages/modifiers/dist/index.js`	144 B	0 B
`packages/modifiers/dist/modifiers.cjs.development.js`	838 B	0 B
`packages/modifiers/dist/modifiers.cjs.production.min.js`	574 B	0 B
`packages/modifiers/dist/modifiers.esm.js`	766 B	0 B
`packages/sortable/dist/index.js`	144 B	0 B
`packages/utilities/dist/index.js`	144 B	0 B
`packages/utilities/dist/utilities.cjs.development.js`	1.63 kB	0 B
`packages/utilities/dist/utilities.cjs.production.min.js`	962 B	0 B
`packages/utilities/dist/utilities.esm.js`	1.55 kB	0 B

_{compressed-size-action}

ranbena · 2021-03-20T15:45:05Z

@clauderic I want to try this branch out in my project that uses dnd-kit, but not sure how to point to it, instead of the installed npm @dnd-kit/core package.
How does one achieve this? With yarn link? With a lerna command?

clauderic · 2021-03-20T15:51:54Z

You can try using yalc or just straight up building the branch locally and replacing the distributed assets in your project's local node_modules if you just want to quickly test without setting up anything complicated.

This PR is still a bit of a work in progress, the acceleration and thresholds need a bit of polish. Also considering letting consumers pass in their own autoscroller offsets

mitchheddles · 2021-03-23T21:14:51Z

packages/core/src/hooks/utilities/useAutoScroller.ts


  useEffect(() => {
-    if (disabled || !scrollableAncestors.length || !draggingRect) {
+    if (disabled || !scrollableAncestors.length || !pointerCoordinates) {


I don't know if it's intended, but it looks possible that sortScrollableAncestors could remove elements. Does it make sense the check the sorted ancestors list instead?

Suggested change

if (disabled || !scrollableAncestors.length || !pointerCoordinates) {

if (disabled || !sortedScrollableAncestors.length || !pointerCoordinates) {

Yeah, I realized that could be an unintended consequence of giving consumers a method as flexible as sortedScrollableAncestors. I've since refactored this approach to only give consumers the option decide whether to set the scroll order to the tree order or reversed tree order 800b2d6

What if you accept a sort function instead?

Semi related to this change... is (or will) there be a way to stop an element scrolling?
When I first saw this PR I was thinking I could use it to stop the window scrolling horizontally, which is an issue I'm facing now with a vertical-only scrolling list.

What if you accept a sort function instead?

I'd prefer to limit the use-cases here for now, can't really think of good use-cases where you would want to scroll ancestors in an order that doesn't match the DOM (reversed or otherwise).

Semi related to this change... is (or will) there be a way to stop an element scrolling?

I hadn't considered that use-case, but that could certainly be added.

Scroll ancestors are necessary in a few places in the library for collision detection to work properly, so I'd prefer to only let consumers decide if a given ancestor can be scrolled.

Something like:

// canScroll(scrollAncestor: Element): boolean; <DndContext autoScroll={{ enabled: true, order: TraversalOrder.ReversedTreeOrder, canScroll(element) { if (element === document.scrollingElement) { return false; } return true; } }} />

This looks good to me and I agree on the sorting 👍

…Width

…ll ancestors

…tScrollableAncestors function

…erval and acceleration

andelkocvjetkovic · 2021-10-14T13:14:16Z

Hello, I had issues with autoScroll.thresholds after hours and hours debugging I found out that it is autoScroll.threshold, without s.

autoScroll={{
	threshold: {
	  x: 0,
	  y: 0.02,
	},
}}

rsshilli · 2021-11-10T05:14:35Z

@andelkocvjetkovic Thank you. You saved my sanity.

@clauderic Maybe you could consider editing your first comment above?

clauderic changed the title ~~Scrolling improvements~~ Autoscrolling improvements Mar 18, 2021

clauderic marked this pull request as ready for review March 18, 2021 21:50

clauderic mentioned this pull request Mar 21, 2021

Improve auto-scrolling for small containers / large drag sources #23

Closed

mitchheddles reviewed Mar 23, 2021

View reviewed changes

clauderic force-pushed the scrolling-improvements branch 2 times, most recently from d2feb26 to 18bcbae Compare March 24, 2021 04:14

Clauderic Demers and others added 11 commits March 24, 2021 19:18

Use clientWidth instead of bounding client width to compare to scroll…

fb75f27

…Width

Only apply width delta to new coordinates if they share the same scro…

a3c5b91

…ll ancestors

Add support for scrolling multiple scroll ancestors in KeyboardSensor

2c95a18

Update autoscroller to use pointer coordinates

768faf5

Auto-scroller should look at scrolling ancestors in reverse order

84f3a06

Fix autoscroll interval incorrectly being reset

4854a65

Allow autoScroll prop to receive a config object including custom sor…

b8a5f4f

…tScrollableAncestors function

Add changeset

5be4a7f

Refactor sortScrollableAncestors to scrollOrder option

e376bf4

Add canScroll option to autoScroll config object

442171f

Allow consumers to configure autoscroll activator, thresholds and int…

a47c6a6

…erval and acceleration

clauderic force-pushed the scrolling-improvements branch from 18bcbae to 4aed3fe Compare March 25, 2021 00:19

Update changeset

399c7b8

clauderic force-pushed the scrolling-improvements branch 3 times, most recently from 68b3c4e to 20f2475 Compare March 25, 2021 00:52

Rename ScrollOrder to TraversalOrder

cc13c98

clauderic force-pushed the scrolling-improvements branch from 20f2475 to cc13c98 Compare March 25, 2021 00:54

clauderic merged commit 8583825 into master Mar 25, 2021

clauderic deleted the scrolling-improvements branch March 25, 2021 01:03

github-actions bot mentioned this pull request Mar 25, 2021

Version Packages #159

Merged

clauderic mentioned this pull request Mar 26, 2021

Fix regression with autoscroll disabling by sensors #165

Merged

wibed mentioned this pull request Jan 27, 2023

autoScroll triggering infinite scroll #891

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Autoscrolling improvements #140

Autoscrolling improvements #140

clauderic commented Mar 18, 2021 •

edited

changeset-bot bot commented Mar 18, 2021 •

edited

github-actions bot commented Mar 18, 2021 •

edited

ranbena commented Mar 20, 2021

clauderic commented Mar 20, 2021

mitchheddles Mar 23, 2021

clauderic Mar 24, 2021

mitchheddles Mar 24, 2021

mitchheddles Mar 24, 2021

clauderic Mar 24, 2021 •

edited

mitchheddles Mar 24, 2021

andelkocvjetkovic commented Oct 14, 2021

rsshilli commented Nov 10, 2021 •

edited

	if (disabled \|\| !scrollableAncestors.length \|\| !pointerCoordinates) {
	if (disabled \|\| !sortedScrollableAncestors.length \|\| !pointerCoordinates) {

Autoscrolling improvements #140

Autoscrolling improvements #140

Conversation

clauderic commented Mar 18, 2021 • edited

changeset-bot bot commented Mar 18, 2021 • edited

🦋 Changeset detected

github-actions bot commented Mar 18, 2021 • edited

ranbena commented Mar 20, 2021

clauderic commented Mar 20, 2021

mitchheddles Mar 23, 2021

Choose a reason for hiding this comment

clauderic Mar 24, 2021

Choose a reason for hiding this comment

mitchheddles Mar 24, 2021

Choose a reason for hiding this comment

mitchheddles Mar 24, 2021

Choose a reason for hiding this comment

clauderic Mar 24, 2021 • edited

Choose a reason for hiding this comment

mitchheddles Mar 24, 2021

Choose a reason for hiding this comment

andelkocvjetkovic commented Oct 14, 2021

rsshilli commented Nov 10, 2021 • edited

clauderic commented Mar 18, 2021 •

edited

changeset-bot bot commented Mar 18, 2021 •

edited

github-actions bot commented Mar 18, 2021 •

edited

clauderic Mar 24, 2021 •

edited

rsshilli commented Nov 10, 2021 •

edited