npm install @solid-primitives/scroll
yarn add @solid-primitives/scroll
pnpm add @solid-primitives/scroll


Reactive primitives to react to element/window scrolling.


Reactive primitive providing a store-like object with current scroll position of specified target.

#How to use it

import { createScrollPosition } from "@solid-primitives/scroll";

// target will be window by default
const windowScroll = createScrollPosition();

createEffect(() => {
  // returned object is a reactive store-like structure
  windowScroll.x; // => number
  windowScroll.y; // => number

#With element refs

let ref: HTMLDivElement | undefined;

// pass as function
const scroll = createScrollPosition(() => ref);
// or wrap with onMount
onMount(() => {
  const scroll = createScrollPosition(ref!);

<div ref={e => (ref = e)} />;

#Reactive Target

The element target can be a reactive signal.

const [target, setTarget] = createSignal<Element | undefined>(element);

const scroll = createScrollPosition(target);

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

// update the tracking element

// disable tracking


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.

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



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.

const scroll = useWindowScrollPosition();

createEffect(() => {
    scroll.x, // => number
    scroll.y, //  => number

#Additional helpers


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