Skip to content

upgrade: scroll package upgrade for Solid 2.0#857

Open
davedbase wants to merge 7 commits into
solidjs-community:nextfrom
davedbase:update/v2/scroll
Open

upgrade: scroll package upgrade for Solid 2.0#857
davedbase wants to merge 7 commits into
solidjs-community:nextfrom
davedbase:update/v2/scroll

Conversation

@davedbase
Copy link
Copy Markdown
Member

@davedbase davedbase commented May 3, 2026

  • Migrate @solid-primitives/scroll to Solid.js v2.0 (beta.10). Updates isServer import to @solidjs/web, replaces onMount/sharedConfig.context with their Solid 2.0 equivalents, and rewrites the internal scroll-trigger mechanism to avoid the new createSignal(fn) derived-signal semantics. Tests updated to use flush() for batched-update assertions.
  • Adds createPreventScroll to @solid-primitives/scroll — prevents scrolling outside a given element by intercepting wheel and touchmove events and optionally hiding the <body> scrollbar
  • Splits the existing src/index.ts into src/scrollPosition.ts and src/preventScroll.ts; index.ts is now a clean barrel re-export
  • Migrates the package to Solid 2.0 beta.12 (@solidjs/web, flush() in tests, ownedWrite, split createEffect)

Attribution

createPreventScroll is adapted from solid-prevent-scroll by Jasmin Noetzli (GiyoMoon), part of the corvu project, which is itself inspired by react-remove-scroll by Anton Korzunov. Both are credited in LICENSE and package.json.

createPreventScroll API

createPreventScroll({
  element?: MaybeAccessor<HTMLElement | null>,
  enabled?: MaybeAccessor<boolean>,               // default true
  hideScrollbar?: MaybeAccessor<boolean>,          // default true
  preventScrollbarShift?: MaybeAccessor<boolean>,  // default true
  preventScrollbarShiftMode?: MaybeAccessor<"padding" | "margin">, // default "padding"
  restoreScrollPosition?: MaybeAccessor<boolean>,  // default true
  allowPinchZoom?: MaybeAccessor<boolean>,         // default false
});

Multiple active instances stack; only the topmost installs event listeners. Body styles are shared and only restored once all instances clean up.

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 3, 2026

🦋 Changeset detected

Latest commit: a5b9a8c

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@davedbase davedbase added this to the Solid 2.0 Migration milestone May 3, 2026
@davedbase davedbase marked this pull request as ready for review May 8, 2026 21:26
Copy link
Copy Markdown
Member

@jer3m01 jer3m01 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, few things I'd change by preference. Also make sure to use signal refs.

Comment thread packages/scroll/src/preventScroll.ts Outdated
Comment thread packages/scroll/src/preventScroll.ts Outdated
Comment thread packages/scroll/src/preventScroll.ts Outdated
Comment thread packages/scroll/src/preventScroll.ts Outdated
Comment thread packages/scroll/src/preventScroll.ts Outdated
Comment thread packages/scroll/src/preventScroll.ts Outdated
Comment thread packages/scroll/src/scrollPosition.ts Outdated
Comment thread packages/scroll/README.md
@davedbase davedbase requested a review from jer3m01 May 14, 2026 23:53
*/
export function getScrollPosition(target: Element | Window | undefined): Position {
if (isServer || !target) {
return { ...FALLBACK_SCROLL_POSITION };
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why putting the fallback in a new object every time? It is already read-only according to TS. Why not just return it as is?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants