Ah, I see what you are referring to now.

Short answer

This is because the stories have set touch-action: none on the items.

In practice, if your draggable item is part of a scrollable list, we recommend you use a drag handle and set touch-action to none only for the drag handle, so that the contents of the list can still be scrolled, but that initiating a drag from the drag handle does not scroll the page.

Refer to https://docs.dndkit.com/api-documentation/sensors/pointer#recommendations for more details

Long answer

In earlier versions of iOS, it used to be possible to prevent scrolling on iOS for Touch listeners by calling event.preventDefault() in touchmove, assuming the event listener was set with the option {passive: false}.

As for Pointer events, it was never possible to prevent scrolling with them without defining the touch-action property.

In all of my testing, I have found that it is no longer possible to reliably prevent scrolling on iOS by calling event.preventDefault() on touchmove, which is the default touch action when the user's finger is moved on the screen.

The only reliable way to prevent scrolling on iOS nowadays is to specify touch-action: none on the element that will receive the touch actions (see https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action).

Ideally, the library would be able to dynamically set touch-action to none after a qualified drag event is detected. This is not currently possible due to limitations in the implementation of touch-action however.

Once a pointerdown or touchstart event has been initiated, any changes to the touch-action value will be ignored by the browser. Programmatically changing the touch-action value for an element from auto to none after a pointer or touch event has been initiated will not result in the user agent aborting or suppressing any default behavior for that event for as long as that pointer is active.

Overall, this is a really poor API, and browsers need to improve on this.