Div scrolling disabled when dragging elements in a scrollable div.

[shawnwakeman]

When you start dragging an element inside a scrollable div, the scroll event for the div is ignored. This issue only takes place when there is no scroll bar on the body, if there is, it will scroll the entire page not the div that holds the draggable elements.

[isaacHagoel]

In this example there are a bunch of scrolling containers and it seems to work as expected. Can please you provide more details and a REPL reproducing the issue?

[shawnwakeman]

Thanks for your response! Those examples are working because the scroll bar is on the body, scrolling with an item currently being dragged, scroll events are applied to the body's scroll bar, and not the parent divs, in the REPL, start dragging an item, you will see the body's scroll bar being moved insead of the one on the parent div that the board is inside of. REPL

[isaacHagoel]

It is not the body that's scrolling. you can see that the headers for "doing" and "done" columns stays in place as the page is not moving.
https://github.com/isaacHagoel/svelte-dnd-action/assets/20507787/97fc00f5-d615-4e56-91eb-a346317e17ea

Same is true here:
https://github.com/isaacHagoel/svelte-dnd-action/assets/20507787/e60c7942-5885-4a63-bac1-f7fe67a39b28

[shawnwakeman]

you are right, the auto scrolling works, actually using the scroll wheel/arrow keys does not. in the original it does because the scroll events are applied to the body and there is no height cap, but in the example i provided, scrolling up and down with the wheel does not scroll through the div like it does when scrolling without dragging.

[isaacHagoel]

So if I understand correctly you are try to 1. Start dragging 2. Hover over a container 3. Use the wheel or arrow keys to make the container below scroll. Is that correct?

…

On Sat, Jun 1, 2024, 09:07 Shawn Wakeman ***@***.***> wrote: you are right, the auto scrolling works, actually using the scroll wheel/arrow keys does not. in the original it does because the scroll events are applied to the body and there is no height cap, but in the example i provided, scrolling up and down with the wheel does not scroll through the div like it does when scrolling without dragging. — Reply to this email directly, view it on GitHub <#583 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC6V2CAT5JU677XCSJTZFD7D3AVCNFSM6AAAAABINXZLRSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNBTGA4DONJUGE> . You are receiving this because you commented.Message ID: ***@***.***>

[shawnwakeman]

1. Start Dragging
2. While Dragging, Use the scroll wheel

My issue is here, the scroll is not applied properly, if you:
put the mouse over center(inside the div with the class="content") and scroll it scrolls the internal scroll bar, and it does not do that when dragging.

[isaacHagoel]

Can you hold the mouse down and scroll with the wheel and it behaves correctly (without dragging)?

…

On Sat, Jun 1, 2024, 09:19 Shawn Wakeman ***@***.***> wrote: 1. Start Dragging 2. While Dragging, Use the scroll wheel My issue is here, the scroll is not applied properly, if you: 3. put the mouse over center(inside the div with the class="content") and scroll it scrolls the internal scroll bar, and it does not do that when dragging. — Reply to this email directly, view it on GitHub <#583 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC7SF45ENZPBM6WDGD3ZFEAQJAVCNFSM6AAAAABINXZLRSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNBTGEYDCOBRGE> . You are receiving this because you commented.Message ID: ***@***.***>

[shawnwakeman]

yes, clicking and holding(not dragging), or just scrolling. They both scroll correctly, but when dragging it does not.

[isaacHagoel]

Interesting. The library doesn't intercept these events or anything like that. I wonder why the behaviour is different. Not next to a computer right now. Will try to figure it out when I have a chance

…

On Sat, Jun 1, 2024, 09:41 Shawn Wakeman ***@***.***> wrote: yes, clicking and holding(not dragging), or just scrolling. They both scroll correctly, but when dragging it does not. — Reply to this email directly, view it on GitHub <#583 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC7YBD3RWMXZJSGIGZTZFEDCXAVCNFSM6AAAAABINXZLRSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNBTGEYTQNBZHE> . You are receiving this because you commented.Message ID: ***@***.***>

[shawnwakeman]

Thank you very much! due to some stuttering had to implement an auto scrolling system which works perfectly fine. But i'm completely stumped on the scroll behavior, the main area of issue was scroll event listers, i would get an output like normal but when dragging, nothing.

[isaacHagoel]

@shawnwakeman
I figured it out.
It happens because the lib moves the focus to the dragged element when dragged start, specifically in this line.
You can try to comment it out and you'll see that it starts working.
This line was added as a fix for #135 .
If there is an alternative way to solve that issue I don't mind removing the line.