Manages horizontal scroll behavior with scroll state tracking and drag-to-scroll functionality
The use-scroller hook manages horizontal scroll behavior for a container element. It provides scroll state (whether content can be scrolled in either direction), scroll functions, and drag-to-scroll functionality.
Use scrollAmount option to control how many pixels the content scrolls when scrollStart or scrollEnd functions are called. Default value is 200 :
Use draggable option to enable or disable drag-to-scroll functionality. When draggable is true (default), users can click and drag to scroll the content:
If you prefer component API, you can use Scroller component. It provides the same functionality with additional styling and control button features.
UseScrollerOptions , UseScrollerReturnValue and UseScrollerScrollState types are exported from the @mantine/hooks package; you can import them in your application: