Scroll Snap for sectional scrolling on website

Implementing Scroll Snap for Sectional Scroll on a Website

CSS Scroll Snap is a native mechanism for "snapping" scroll to specific positions without JavaScript. Works in all modern browsers, performant (browser handles at compositor level), requires no libraries. Used for landings with sectional scroll, horizontal sliders, carousels.

Basic Implementation

/* Vertical sectional scroll */
.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;    /* mandatory snap */
  scroll-behavior: smooth;
  /* Important: removes momentum scrolling on iOS, needs additional code */
  -webkit-overflow-scrolling: touch;
}

.section {
  height: 100vh;
  scroll-snap-align: start;         /* snap to section start */
  scroll-snap-stop: always;         /* can't fly over section */
}

/* Horizontal slider */
.slider-container {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  gap: 16px;
  padding: 0 16px;
  /* Hide scrollbar visually */
  scrollbar-width: none;
}

.slider-container::-webkit-scrollbar {
  display: none;
}

.slide {
  flex-shrink: 0;
  width: 300px;
  scroll-snap-align: start;
}

// components/SectionScroll.tsx
export function SectionScroll({ sections }: { sections: React.ReactNode[] }) {
  return (
    <div
      className="h-screen overflow-y-scroll"
      style={{
        scrollSnapType: 'y mandatory',
        scrollBehavior: 'smooth',
      }}
    >
      {sections.map((section, i) => (
        <section
          key={i}
          className="h-screen flex items-center justify-center"
          style={{
            scrollSnapAlign: 'start',
            scrollSnapStop: 'always',
          }}
        >
          {section}
        </section>
      ))}
    </div>
  )
}

Navigation Dots with Active Section Tracking

// hooks/useActiveSectionScroll.ts
import { useEffect, useRef, useState } from 'react'

export function useActiveSectionScroll(sectionCount: number) {
  const [activeIndex, setActiveIndex] = useState(0)
  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const container = containerRef.current
    if (!container) return

    const handleScroll = () => {
      const { scrollTop, clientHeight } = container
      const index = Math.round(scrollTop / clientHeight)
      setActiveIndex(index)
    }

    container.addEventListener('scroll', handleScroll, { passive: true })
    return () => container.removeEventListener('scroll', handleScroll)
  }, [])

  const scrollToSection = (index: number) => {
    const container = containerRef.current
    if (!container) return
    container.scrollTo({
      top: index * container.clientHeight,
      behavior: 'smooth',
    })
  }

  return { containerRef, activeIndex, scrollToSection }
}

// components/FullPageScroll.tsx
import { useActiveSectionScroll } from '../hooks/useActiveSectionScroll'

const sections = [
  { id: 'hero', label: 'Home', color: 'bg-blue-600' },
  { id: 'about', label: 'About', color: 'bg-purple-600' },
  { id: 'services', label: 'Services', color: 'bg-indigo-600' },
  { id: 'contact', label: 'Contact', color: 'bg-pink-600' },
]

export function FullPageScroll() {
  const { containerRef, activeIndex, scrollToSection } =
    useActiveSectionScroll(sections.length)

  return (
    <div className="relative">
      {/* Navigation dots */}
      <nav className="fixed right-6 top-1/2 -translate-y-1/2 z-50 flex flex-col gap-3">
        {sections.map((section, i) => (
          <button
            key={section.id}
            onClick={() => scrollToSection(i)}
            className={`
              w-3 h-3 rounded-full border-2 border-white transition-all duration-300
              ${activeIndex === i ? 'bg-white scale-125' : 'bg-transparent'}
            `}
            aria-label={`Go to ${section.label}`}
          />
        ))}
      </nav>

      {/* Sections container */}
      <div
        ref={containerRef}
        className="h-screen overflow-y-scroll"
        style={{ scrollSnapType: 'y mandatory' }}
      >
        {sections.map((section, i) => (
          <section
            key={section.id}
            id={section.id}
            className={`h-screen flex items-center justify-center ${section.color}`}
            style={{ scrollSnapAlign: 'start', scrollSnapStop: 'always' }}
          >
            <h2 className="text-5xl font-bold text-white">{section.label}</h2>
          </section>
        ))}
      </div>
    </div>
  )
}

scroll-snap-type: proximity vs mandatory

/* mandatory — always snaps, can't stop between */
scroll-snap-type: y mandatory;

/* proximity — snaps only if scroll stopped close to snap point */
scroll-snap-type: y proximity;

For landings mandatory is recommended. For long pages with varying content height — proximity, otherwise user can't scroll to middle of section.

Horizontal Carousel with Controls

// components/CardCarousel.tsx
import { useRef } from 'react'

export function CardCarousel({ cards }: { cards: React.ReactNode[] }) {
  const trackRef = useRef<HTMLDivElement>(null)

  const scrollBy = (direction: 'prev' | 'next') => {
    const track = trackRef.current
    if (!track) return
    const cardWidth = (track.firstElementChild as HTMLElement)?.offsetWidth ?? 300
    track.scrollBy({
      left: direction === 'next' ? cardWidth + 16 : -(cardWidth + 16),
      behavior: 'smooth',
    })
  }

  return (
    <div className="relative">
      <button
        onClick={() => scrollBy('prev')}
        className="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white shadow-lg rounded-full w-10 h-10"
      >
        ←
      </button>

      <div
        ref={trackRef}
        className="flex gap-4 overflow-x-scroll px-12"
        style={{ scrollSnapType: 'x mandatory', scrollbarWidth: 'none' }}
      >
        {cards.map((card, i) => (
          <div
            key={i}
            style={{ scrollSnapAlign: 'start', flexShrink: 0, width: 300 }}
          >
            {card}
          </div>
        ))}
      </div>

      <button
        onClick={() => scrollBy('next')}
        className="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white shadow-lg rounded-full w-10 h-10"
      >
        →
      </button>
    </div>
  )
}

Typical Timeline

Basic sectional scroll with navigation dots — 4–6 hours. Horizontal carousel + controls + indicators + responsive — 1 working day.