`tsx
const [target, setTarget] = createSignal(element);

const scroll = createScrollPosition(target);

// if target is undefined, scroll values will be 0
scroll.x; // => number
scroll.y; // => number

// update the tracking element
setTarget(ref);

// disable tracking
setTarget(undefined);
`

#### Destructuring

If you are interested in listening to only single axis, you'd still have to access scroll.y as a property. To use it as a separate signal, you can wrap it with a function, or use destructure helper.

`ts
const scroll = createScrollPosition();
const x = () => scroll.x;
x(); // => number

// or destructure

import { destructure } from "@solid-primitives/destructure";
const { x, y } = destructure(createScrollPosition());
x(); // => number
y(); // => number
`

$3

https://codesandbox.io/s/solid-primitives-scroll-xy19c8?file=/index.tsx

useWindowScrollPosition

Returns a reactive object with current window scroll position.

useWindowScrollPosition is a singleton root primitive, hence the object instance, signals and event-listeners are shared between dependents, making it more optimized to use in multiple places at once.

`ts
const scroll = useWindowScrollPosition();

createEffect(() => {
console.log(
scroll.x, // => number
scroll.y, // => number
);
});
`

Additional helpers

$3

Get an { x: number, y: number } object of element/window scroll position.

Primitive ideas:

_PRs Welcome :)_

- createScrollTo - A primitive to support scroll to a target
- createHashScroll` - A primitive to support scrolling based on a hashtag change

Changelog

See CHANGELOG.md