motion icon indicating copy to clipboard operation
motion copied to clipboard

[BUG] Draggable area incorrectly reduced after page scroll and refresh

Open SaeWooKKang opened this issue 1 year ago • 0 comments

1. Read the FAQs 👇2. Describe the bug

When applying dragConstraints with a ref (position: absolute, top, left, bottom, right: 0), the behavior is as follows:

Without scrolling, the draggable element can move freely within the entire viewport area. However, after scrolling, the draggable element is constrained to move only within the viewport area minus the scrolled height.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://stackblitz.com/edit/vitejs-vite-gdmqjk?file=src%2FApp.tsx

4. Steps to reproduce

  1. Navigate to the provided link.
  2. Without scrolling, verify that you can drag the element to all corners (left, right, top, and bottom) of the viewport.
  3. Scroll the page.
  4. Refresh the page.
  5. Attempt to drag the element and verify that you cannot move it to the bottom of the viewport anymore.

5. Expected behavior

Even when the page is scrolled, the element should be draggable to the bottom of the viewport.

6. Video or screenshots

https://github.com/user-attachments/assets/3ed7eeca-1e1b-4cde-99e5-9b3ee90f32f1

7. Environment details

mac 15, chrome

SaeWooKKang avatar Oct 11 '24 14:10 SaeWooKKang