Enhancement Proposal: Ensure Correct Scroll Behavior Across Drawer Snap Points

[necrosource-bot]

Hi Emil,

I’ve been a long-time admirer of your work — your ability to design clean, elegant UI components is inspiring. I actively use your components in my projects, and I’d like to propose an improvement to the drawer.

I’d like to suggest adding built-in tracking of the drawer’s vertical translation at different snap points. This is important because the scrollable list inside the drawer needs to dynamically adjust its height to ensure that scrolling works correctly at every snap point.
Here is the custom implementation I’m currently using:

const ref = useRef<HTMLDivElement>(null)
const [translateY, setTranslateY] = useState(0)

useEffect(() => {
  if (!open) return
  let frameId: number

  const update = () => {
    if (!ref.current) return

    const style = getComputedStyle(ref.current).transform
    if (style && style !== 'none') {
      const matrix = style.match(/matrix.*\((.+)\)/)?.[1]
      if (matrix) {
        const values = matrix.split(', ')
        const y = parseFloat(values[5])
        setTranslateY(y)
      }
    }

    frameId = requestAnimationFrame(update)
  }

  frameId = requestAnimationFrame(update)
  return () => cancelAnimationFrame(frameId)
}, [open])

<DrawerContent ref={ref}>
  <ul
    style={{ height: `calc(100% - ${translateY}px)` }}
    className="overflow-y-auto"
  >
    …
  </ul>
</DrawerContent>

This allows the list to maintain the correct scrollable height as the drawer changes between snap points.

Additionally, I’d like to propose enhancing the drawer.handle:
instead of it being only a drag handle button, it could act as a container that wraps the header and optionally integrates with lists when using snap points. This would offer a more flexible layout and improve the developer experience.

Thanks for considering this suggestion — and thank you for your amazing work!