Auto Scroll

By default, the KendoReact useDraggable hook and Draggable component will scroll the nearest scrollable parent element whenever the drag reaches any of it's edges.

Use the scrollX and scrollY arguments from the Drag&Drop callbacks to correctly calculate the new position of the element.

The following example demonstrates how the Auto Scroll functionality behaves in a scrollable container.

Example
View Source
Edit In Stackblitz  
Change Theme:

Disabling the Auto Scroll

To disable the Auto Scroll functionality, use either of the following approaches:

  • Set the autoScroll argument to the useDraggable hook.

        useDraggable(
            element,
            { ...callbacks },
            { autoScroll: false }
        )
  • Set the autoScroll property of the Draggable component.

        <Draggable autoScroll={false}>
            <div>Drag Me!</div>
        </Draggable>

In this article

Not finding the help you need?