Gallery/Scroll/Scroll progress

Scroll progress

A spring-smoothed scrollYProgress on the inner container.

← Previous Next →

createScroll

Scroll line 1. The bar tracks scrollYProgress smoothly.

Scroll line 2. The bar tracks scrollYProgress smoothly.

Scroll line 3. The bar tracks scrollYProgress smoothly.

Scroll line 4. The bar tracks scrollYProgress smoothly.

Scroll line 5. The bar tracks scrollYProgress smoothly.

Scroll line 6. The bar tracks scrollYProgress smoothly.

Scroll line 7. The bar tracks scrollYProgress smoothly.

Scroll line 8. The bar tracks scrollYProgress smoothly.

Scroll line 9. The bar tracks scrollYProgress smoothly.

Scroll line 10. The bar tracks scrollYProgress smoothly.

Scroll line 11. The bar tracks scrollYProgress smoothly.

Scroll line 12. The bar tracks scrollYProgress smoothly.

Scroll line 13. The bar tracks scrollYProgress smoothly.

Scroll line 14. The bar tracks scrollYProgress smoothly.

Scroll line 15. The bar tracks scrollYProgress smoothly.

Scroll line 16. The bar tracks scrollYProgress smoothly.

Scroll line 17. The bar tracks scrollYProgress smoothly.

Scroll line 18. The bar tracks scrollYProgress smoothly.

Scroll line 19. The bar tracks scrollYProgress smoothly.

Scroll line 20. The bar tracks scrollYProgress smoothly.

scroll-progress.tsx

import { motion, createScroll, createSpring } from 'motion-solidjs'
import { createSignal } from 'solid-js'

export const meta = {
  slug: 'scroll-progress',
  title: 'Scroll progress',
  category: 'scroll',
  description: 'A spring-smoothed scrollYProgress on the inner container.',
  tag: 'createScroll',
} as const

export default function ScrollProgress() {
  const [container, setContainer] = createSignal<HTMLDivElement | null>(null)
  const { scrollYProgress } = createScroll({ container })
  const smooth = createSpring(scrollYProgress, { stiffness: 120, damping: 30 })

  return (
    <div
      ref={setContainer}
      class="relative h-64 w-56 overflow-y-scroll rounded-2xl border border-border bg-card"
    >
      <motion.span
        class="sticky top-0 left-0 z-10 block h-1 origin-left bg-grad-rose"
        style={{ scaleX: smooth }}
      />
      <div class="space-y-3 p-4 text-xs leading-relaxed text-fg-muted">
        {Array.from({ length: 20 }).map((_, i) => (
          <p>Scroll line {i + 1}. The bar tracks scrollYProgress smoothly.</p>
        ))}
      </div>
    </div>
  )
}