#651·vaul

Dragging drawer not possible when drawer isn't position: fixed and the underlying page has scroll

Author: therealPaulPlayCreated Jun 29, 2026Updated Jun 29, 2026

When the drawer is not used with position: fixed, and instead for example with position: absolute, any scroll of the underlying page makes the drawer stuck (it is no longer possible to drag it in any direction).

This is because function shouldDrag(...) inside src/index.tsx walks the full DOM tree upwards and checks all ancestors for a scrollTop that isn't 0. If it finds one, it returns.

The fix I believe is to stop walking up when we reach the main outer drawer node:

typescript
while (element) {
  if (element.scrollHeight > element.clientHeight) {
    if (element.scrollTop !== 0) {
      lastTimeDragPrevented.current = new Date();
      return false;
    }
    if (element.getAttribute('role') === 'dialog') {
      return true;
    }
  }

  if (element === drawerRef.current) break; // Add this

  element = element.parentNode as HTMLElement;
}

This walk-up is likely there to make it possible to add scrollable elments inside the drawer, and ensure that scrolling these doesn't drag the drawer. But the check continues checking ancestors that aren't even in the drawer anymore, causing this bug.