solidjs-scroll-essentials

solidjs-scroll-essentials provides you with required scroll based primitives to control scroll behavior such as scroll lock in solidjs.

Quick start

Install it:

npm i solidjs-scroll-essentials
# or
yarn add solidjs-scroll-essentials
# or
pnpm add solidjs-scroll-essentials

Use it:

import solidjs-scroll-essentials from 'solidjs-scroll-essentials'

First Primitive useScrollLock

import { useScrollLock } from "solidjs-scroll-essentials"
const [ isLocked, setScrollLocked ] = useScrollLock()

stackblitz example for this primitive

It handles layout shift, by adding padding to body tag & as well lock the scrolling as you wanted it to.

Second Primitive useScrollIntoView

import { useScrollIntoView } from "solidjs-scroll-essentials"
const { scrollIntoView, setTargetRef } = useScrollIntoView()

stackblitz example

Third Primitive useScrollPosition

import { useScrollPosition } from "solidjs-scroll-essentials"
const { x,y } = useScrollPosition()

stackblitz example

Forth Primitive useWindowScroll

import { useWindowScroll } from 'solidjs-scroll-essentials'
const [position, scrollTo] = useWindowScroll

Acknowledgement

• Mantine Core Library