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.

Wrong top calculation for scroll ancestors with fixed position?

See original GitHub issue

Hi there, we’re using the library to create a dnd experience between a scrollable fixed position div and a sortable ( scrollable ) drop zone. This mostly works well ( we’re currently using PR #54 as our basis ) but causes our DragOverlay to appear in the wrong top position after scrolling the drop zone.

Below is an example based on the sandbox shown in #43 scroll-fixed-3 https://codesandbox.io/s/react-dnd-grid-forked-gls5l?file=/src/App.js

We made a change to check whether an element ancestor is fixed in getScrollableAncestors, which causes only that ancestor to be returned ( Obviously, this is just a small demo and doesn’t deal with more complex scenarios / performance etc.)

https://github.com/bbenzikry/dnd-kit/blob/a2cd7052c1cdf04e05af936127650b1dd6db7485/packages/core/src/utilities/scroll/getScrollableAncestors.ts#L22-L26

This makes the following return the expected value for our scenario https://github.com/clauderic/dnd-kit/blob/d13d28471ec7716f08e211647cad89ae3c11dd06/packages/core/src/utilities/rect/getRect.ts#L82-L84

Issue Analytics

State:
Created 3 years ago
Reactions:12
Comments:12 (3 by maintainers)

Top GitHub Comments

5reactions

namroodinccommented, May 4, 2021

Has there been any fixes for this bug?

1reaction

sbaechlercommented, Oct 11, 2021

For anyone googling this error: The fix has been released in @dnd-kit/core 4.0.0.

Top Results From Across the Web

Can I position an element fixed relative to parent? [duplicate]

To position an element "fixed" relative to the window, you want position:fixed , and can use top: , left: , right: , and...

Element size and scrolling - The Modern JavaScript Tutorial

Setting scrollTop to 0 or a big value, such as 1e9 will make the element scroll to the very top/bottom respectively. Don't take...

top / bottom / left / right - CSS-Tricks

The top property has no effect on unpositioned elements (elements with position set to static ). This is how elements are positioned by...

CSS Position Sticky Tutorial With Examples[Complete Guide]

Create a new CSS position sticky and get your CSS position fixed with this tutorial that also discusses cross browser compatibility for CSS ......

Advanced layouts with absolute and fixed positioning

For absolutely positioned elements however it's a little more complicated. In this case the containing block is the nearest positioned ancestor. By “positioned” ......