React-beautiful-dnd: Optional auto scrolling

[vladimir-konnov]

Bug or feature request?

Feature

Expected behavior

There should be an option to disable auto scrolling since it's not required in all cases

Actual behavior

When there's another control (not droppable) below the kanban board there's no sense in scrolling the page down. In my case it's a disaster, because on auto scrolling droppable coordinates/dimensions aren't recalculated so dragover (and drop too) doesn't work properly
https://monosnap.com/file/n72kQ8y0evWzzSmAgAXdwJZsCsYsuS

Steps to reproduce

Browser version

Demo

https://monosnap.com/file/n72kQ8y0evWzzSmAgAXdwJZsCsYsuS

[alexreardon]

Disabling auto scrolling would not fix your issue. A user can scroll through a variety of means including mouse wheel and keyboard.

Our auto scrolling just makes this easier. If you want to block all scrolling that goes outside of the scope of this library. You could look at implementing any number of solutions you can find by googling: 'Disabling scroll'

Eg:

• https://davidwells.io/snippets/disable-scrolling-with-javascript/
• https://github.com/gilbarbara/disable-scroll
• https://davidwalsh.name/prevent-body-scrolling
• https://css-tricks.com/forums/topic/prevent-body-scrolling-when-the-user-scrolls-on-fixed-position-div/

I have not tested any of these but they might help you get what you are after.

At this time we are not looking at supporting a browser scroll block out of the box for this library

[foodforarabbit]

I have a use case for disabling autoscroll. Right now, nested scroll containers aren't supported. However, the library scrolls the top-most scrollable container, which is less desirable than freezing all scrolling and forcing the user to manually scroll. Ideally, nested scrollable container support is best but I'm hoping auto scroll disable is an easier / quicker implementation.

[alexreardon]

You could possibly opt out yourself by adding your own capture, non-passive scroll listener to the window and calling event.preventDefault(). This would prevent all scrolling during a drag

[vladimir-konnov]

@alexreardon actually you can't, as far as I understand. You can't preventDefault() browser scroll. Well you can, but it won't work. That's the problem. The only workaround I found is to preventDefault() keydown (arrow keys), to preventDefault() mouse wheel scroll, dom scroll, touchmove, middle mouse down event.
And it's not a good solution/workaround: for example drag'n'drop doesn't work in touch devices, all in the sake of not giving a user an ability to scroll the page in order not to ruin hover with broken (not recalculated during scroll) coordinates of droppables. If some droppables appear before drag or their coordinates changed upon drag (animation) and then user scrolls down -- alas you get hovers working above the screen. Until it's scrolled back. Also autoscroll here makes it worse: I can't disable it, so I'm sticked to a specific version where there's no autoscroll feature. I suggested to make autoscroll optional: enable/disable prop, but you decided that it wasn't a priority

[ssmlee04]

@alexreardon I might be having other components that does drag & drop and has it's own logic and it wouldn't make sense to disable scrolling for other components at the same time.

[matttk]

Would also like to be able to disable autoscroll. I'm searching through all the auto scroll bugs to find out what's going wrong for me but haven't come up with anything yet. Seems like a good temporary solution to just kill autoscrolling, especially since I don't need it.

I have a horizontal list, basically made from the basic horizontal list example. However, for some reason, as soon as I pick up an item, the page starts scrolling to the top. The faster I move the item, the faster it scrolls to the top. I'm nowhere near the top...

[uffou]

I also need to be able to disable auto scroll. I have a horizontal scrolling container and another one that I am dragging items from. At the moment when I start dragging and intersect the horizontal scrolling container, it starts to scroll which is not the desired behavior. A simple autoScroll={false} would do a great deal for everyone.

[buzzpsych]

Where in the codebase are you powering the auto scroll? Can this be made optional?

I currently have a fixed sidebar for example with some elements in it that are recordable. Whenever I try and move down or up it moves my body.

The best solution I found so far is adding addEventListener for scroll with
function noscroll() { window.scrollTo(0, 0) }

BUT the problem is that if you are already scrolled down the page and you initiate this, it jumps back up. BAD UX

[cocacrave]

So far I tried onDragStart and onDragEnd calls the function to toggle classname on body to apply overflow: hidden if the item.source.droppableId starts with a string sidebar and it's toggling the class fine but why is body still scrolling? My sidebar is a sticky component, and when I try to drag an item towards the top or bottom, the whole body scrolls.

Any workaround?

[Venryx]

I also would be glad to see the option to enable or disable the auto-scrolling function.

In the meantime, one way to accomplish this is with the string-replace-webpack-plugin: https://github.com/jamesandersen/string-replace-webpack-plugin

My webpack config:

webpackConfig.module.rules.push({
    // test: /connected-(draggable|droppable).js$/,
    test: /react-beautiful-dnd.esm.js$/,
    loader: StringReplacePlugin.replace({ replacements: [
        // disable map edge-scrolling, when option is set
        {
            // pattern: /var canScrollDroppable = function canScrollDroppable\(droppable, change\) {/,
            pattern: /var canScrollDroppable = function canScrollDroppable.+/,
            replacement: () => `
                var canScrollDroppable = function canScrollDroppable(droppable, change) {
                    if (window.LockDNDEdgeScrolling()) return false;
            `.trim(),
        },
    ] }),
});

Of course, you'll have to implement a LockDNDEdgeScrolling() global function that works for your project.

Also, be sure that if you take this approach, you lock down the react-beautiful-dnd package to a specific version in npm, so that your regex-based code replacement will not get broken by a later update.

[cavaloni]

This is a desired feature for us as well. Adding comment for a "vote", and a strong one at that.

[cavaloni]

Figured out a solution for those where scrollTo(0, 0) is no good because its lower in the page, which is simply to get the window.scrollY position in onBeforeDragStart and setting event listener there, as noted above in @buzzpsych response, and just simply setting the y argument in scrollTo to the current scroll position. Then it stays where you are! As it should, if we could just have a damn option to turn off this feature.

[mjuopperi]

I fiddled with this a bit and it was fairly easy to add a prop to DragDropContext to disable auto scrolling. Contribution docs mention that they prefer people not to open PR:s directly, so not opening one yet.

Here is how I did it: https://github.com/mjuopperi/react-beautiful-dnd/commits/optional-autoscroll