A draggable bottom sheet component built with vanilla JavaScript and CSS. This implementation delivers iOS-quality mobile interactions without framework dependencies.
Key features:
- Pointer events API for unified touch and mouse handling
- Hardware-accelerated CSS transforms for 60fps animations
- Drag-to-dismiss with intelligent height thresholds
- Fullscreen expansion support
- Less than 2KB minified
The component uses transform-based animations and prevents scroll chaining on mobile browsers.
Perfect for product details, map overlays, or form inputs where you need native app behavior on the web.
👉 Blog Post
👉 GitHub Repo
👉 Live Demo
Top comments (0)