Synchronized Scrolling Components
Components for creating synchronized scrolling experiences with master-slave relationships and drag-to-scroll functionality.
Basic Usage with Components
import {SyncScrollProvider, SyncScroll, SyncScrollSlave} from "@vuer-ai/vuer-uikit";
function App() {
return (
<SyncScrollProvider>
<SyncScroll className="overflow-y-auto h-96">
{/* Master scrollable content */}
</SyncScroll>
<SyncScrollSlave className="overflow-y-auto h-96">
{/* Slave synchronized scroll area */}
</SyncScrollSlave>
</SyncScrollProvider>
);
}
With Drag Control
The drag components now include built-in drag-to-scroll functionality. Click and drag to scroll!
import {SyncScrollProvider, SyncScroll, SyncDrag, SyncScrollSlave} from "@vuer-ai/vuer-uikit";
function App() {
return (
<SyncScrollProvider>
<SyncScroll className="overflow-y-auto h-96">
{/* Master scrollable content */}
</SyncScroll>
<SyncDrag className="overflow-y-auto h-96">
{/* Draggable content with vertical drag-to-scroll */}
</SyncDrag>
<SyncScrollSlave className="overflow-y-auto h-96">
{/* Slave synchronized area */}
</SyncScrollSlave>
</SyncScrollProvider>
);
}
Horizontal Drag Variants
Horizontal drag components allow left/right scrolling via drag gestures:
Horizontal Draggable Panels - Both Can Be Dragged
Drag either panel to control both - Master (left) overrides Slave (right)
import {SyncScrollProvider, SyncDragX, SyncDragSlaveX} from "@vuer-ai/vuer-uikit";
function App() {
return (
<SyncScrollProvider>
<div className="grid grid-cols-2 gap-4">
{/* Master drag - controls all */}
<SyncDragX className="border-2 border-blue-400 rounded h-32 overflow-x-auto bg-blue-50">
<div className="flex gap-4 p-4" style={{width: '1200px'}}>
{/* Horizontal content */}
</div>
</SyncDragX>
{/* Slave drag - follows master but can be dragged */}
<SyncDragSlaveX className="border-2 border-green-400 rounded h-32 bg-green-50">
<div className="flex gap-4 p-4" style={{width: '1200px'}}>
{/* Horizontal content */}
</div>
</SyncDragSlaveX>
</div>
</SyncScrollProvider>
);
}
Omnidirectional Drag Variants
Omnidirectional drag components allow scrolling in any direction via drag gestures:
Omnidirectional Draggable Panels - Both Can Be Dragged
Drag either panel in any direction - Master (left) overrides Slave (right)
import {SyncScrollProvider, SyncDrag, SyncDragSlave} from "@vuer-ai/vuer-uikit";
function App() {
return (
<SyncScrollProvider>
<div className="grid grid-cols-2 gap-4">
{/* Master drag - controls all */}
<SyncDrag className="border-2 border-purple-400 rounded h-64 overflow-auto bg-purple-50">
<div style={{width: '800px', height: '600px'}} className="p-8">
{/* Content that scrolls in both directions */}
</div>
</SyncDrag>
{/* Slave drag - follows master but can be dragged */}
<SyncDragSlave className="border-2 border-orange-400 rounded h-64 bg-orange-50">
<div style={{width: '800px', height: '600px'}} className="p-8">
{/* Content that scrolls in both directions */}
</div>
</SyncDragSlave>
</div>
</SyncScrollProvider>
);
}
Using Hooks Directly
For more control, you can use the hooks directly:
import {SyncScrollProvider, useSyncScroll, useScrollSlave, useSyncDrag} from "@vuer-ai/vuer-uikit";
// Master panel - controls all other panels
function MasterPanel() {
const ref = useSyncScroll();
return (
<div ref={ref} className="overflow-y-auto h-96">
{/* Your scrollable content */}
</div>
);
}
// Slave panel - controlled by master, syncs with other slaves
function SlavePanel() {
const ref = useScrollSlave();
return (
<div ref={ref} className="overflow-y-auto h-96">
{/* Your scrollable content */}
</div>
);
}
// Drag panel - acts like master when dragged
function DragPanel() {
const ref = useSyncDrag();
return (
<div ref={ref} className="overflow-y-auto h-96">
{/* Your draggable content */}
</div>
);
}
function App() {
return (
<SyncScrollProvider>
<MasterPanel/>
<SlavePanel/>
<DragPanel/>
</SyncScrollProvider>
);
}
API Reference
Components
<SyncScrollProvider>
Wraps components that need synchronized scrolling.
<SyncScroll>
A scrollable container that synchronizes with other scroll components. Acts as a master that controls all other synchronized elements.
Props: Extends HTMLAttributes<HTMLDivElement>
<SyncScrollSlave>
A scrollable container that is controlled by masters and syncs with other slaves.
Props: Extends HTMLAttributes<HTMLDivElement>
<SyncDrag>
A draggable container that supports both horizontal and vertical drag-to-scroll. Click and drag in any direction to scroll both horizontally and vertically. Controls synchronized scrolling.
Props: Extends HTMLAttributes<HTMLDivElement>
<SyncDragX>
A draggable container that only supports horizontal drag-to-scroll. Click and drag left/right to scroll horizontally only (vertical dragging is disabled). Controls synchronized scrolling.
Props: Extends HTMLAttributes<HTMLDivElement>
Hooks
useSyncScroll()
Returns a ref for a master scroll element that controls all other elements.
useScrollSlave()
Returns a ref for a slave scroll element that is controlled by masters and syncs with other slaves.
useSyncDrag()
Returns a ref for drag-controlled scrolling that acts like a master in synchronized scrolling.
Behavior Notes
- Master elements (SyncScroll, useSyncScroll): Control all other synchronized elements
- Slave elements (SyncScrollSlave, useScrollSlave): Are controlled by masters and sync with other slaves
- Drag elements (SyncDrag, SyncDragX, Drag, useSyncDrag): Act like masters with built-in drag-to-scroll functionality
SyncDrag: Vertical drag-to-scrollSyncDragX: Horizontal drag-to-scrollDrag: Omnidirectional drag-to-scroll
📍 SyncScroll: Master scroll control - scrolling affects all synchronized elements
📍 SyncScrollSlave: Controlled by masters, syncs with other slaves
📍 SyncDrag: Vertical drag-to-scroll that controls all synchronized elements
📍 SyncDragX: Horizontal drag-to-scroll that controls all synchronized elements
📍 Drag: Omnidirectional drag-to-scroll that controls all synchronized elements