# useScrollSync
> Synchronises scroll position across multiple elements.

Synchronises horizontal scroll positions across multiple elements so they scroll together. Returns a scroll handler to attach to the synchronised elements.

## Import

```js
import { useScrollSync } from '@volue/wave-react';
```

## Example

```jsx
() => {
  const ref1 = React.useRef(null);
  const ref2 = React.useRef(null);
  const [isActive, setIsActive] = React.useState(true);
  const handleScroll = useScrollSync([ref1, ref2], !isActive);

  const content = Array.from({ length: 20 }, (_, i) => (
    <Box key={i} paddingX="spacingS" paddingY="spacingXs">
      <Text overflowStrategy="nowrap">{'Column ' + (i + 1)}</Text>
    </Box>
  ));

  return (
    <Flex flow="column">
      <Flex
        ref={ref1}
        onScroll={handleScroll}
        css={{
          overflow: 'auto'
        }}
      >
        {content}
      </Flex>
      <Flex
        ref={ref2}
        onScroll={handleScroll}
        css={{
          overflow: 'auto'
        }}
      >
        {content}
      </Flex>
      <Switch.Root isActive={isActive} onIsActiveChange={setIsActive}>
        <Switch.Label>{'Scroll sync active'}</Switch.Label>
        <Switch.Indicator>
          <Switch.On>{'On'}</Switch.On>
          <Switch.Off>{'Off'}</Switch.Off>
        </Switch.Indicator>
      </Switch.Root>
    </Flex>
  );
};
```

---

## API reference

### Arguments

| Name         | Type                       | Default | Description                                                              | Required |
| ------------ | -------------------------- | ------- | ------------------------------------------------------------------------ | -------- |
| `refs`       | `RefObject<HTMLElement>[]` | `—`     | Array of refs to elements whose scroll positions should be synchronised. | Yes      |
| `isDisabled` | `boolean`                  | `false` | Whether scroll synchronisation is disabled.                              |          |

### Returns

`((event: UIEvent) => void) | undefined` — A scroll event handler to attach to the synchronised elements, or `undefined` if disabled.