Scroll

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
});

let ref: HTMLDivElement | undefined;

// pass as function — preferred, handles ref population automatically
const scroll = createScrollPosition(() => ref);
// or wrap with onSettled
onSettled(() => {
  const scroll = createScrollPosition(ref!);
});

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

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
setTarget(ref);

// disable tracking
setTarget(undefined);

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

const scroll = useWindowScrollPosition();

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

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

// Prevent all page scroll (no element specified)
createPreventScroll();

// Prevent scroll outside a specific element
createPreventScroll({ element: () => myElement });

// Using a signal ref — preferred pattern for JSX refs
const [ref, setRef] = createSignal<HTMLElement>();
createPreventScroll({ element: ref });

<div ref={setRef} />;

// Reactive enabled toggle
const [open, setOpen] = createSignal(false);
createPreventScroll({ enabled: open });