question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Body scroll while dragging?

See original GitHub issue

Hi,

Just wanted to ask how the scroll works? I have checked the examples and if I remove overflow: auto from the demo (.demo), it stops working. I wonder if it’s possible to make the whole page (body) to scroll while dragging?

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:10 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
kutlugsahincommented, Jul 19, 2018

Hey @ispal It’s implemented in v0.2.3. Basically the lib looks for all the elements (starting from the containers to the root) which has scrollbars and manipulates the scroll values according to the dragging positions. This search goes on until parentElement is undefined. Since window cannot be reached by parentElement it needed a special implementation which is implemented in smooth-dnd v0.5.6. Cheers!

1reaction
isaac-souzacommented, Feb 7, 2022

To workaround this use a scrollable div element instead of instead of body.

<template>
    <div class="overflow-y-auto h-screen">
        <span>Studio Ghibli Tier List</span>
        <Container orientation="vertical" @drop="onDrop" :auto-scroll-enabled="true">
            <Draggable v-for="(item, i) in items" :key="item.id">
                <div class="w-24 h-24 bg-blue-400 m-2">
                    {{ i + 1 }} -> {{ item.data }}
                </div>
            </Draggable>
        </Container>
    </div>
</template>

Not sure if anyone is still having that issue, but as answered by @kutlugsahin, the workaround works just fine, at least it worked for me.

It is on the second line <div class="overflow-y-auto h-screen">.

Hope that helps anyone.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to disable page scroll while dragging draggable in jquery?
When i drag an item of the type 'drag_area a', if i scroll the page while dragging it, the item exits from containment......
Read more >
Drag to scroll - HTML DOM
The cursor: grab indicates that the element can be clicked and dragged. Scroll to given position. As long as the element is scrollable,...
Read more >
Prevent scroll when dragging on mobile/tablet. #101 - GitHub
Is there any way to prevent the page from scrolling when using a drag n drop gesture on tablet/mobile? I am implementing drag...
Read more >
How to keep scrolling page while dragging Tree node until ...
While I am dragging a node from a RadTreeView, I want the page to scroll up or down when the element hits a...
Read more >
.scroll() | jQuery API Documentation
A scroll event is sent whenever the element's scroll position changes, regardless of the cause. A mouse click or drag on the scroll...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found