smooth-scroll-into-view-if-needed

This is an addon to scroll-into-view-if-needed that ponyfills smooth scrolling.

This package requires v2 of scroll-into-view-if-needed, currently in prerelease

Demo

Install

yarn add smooth-scroll-into-view-if-needed scroll-into-view-if-needed@next

Usage

import scrollIntoView from 'smooth-scroll-into-view-if-needed'
const node = document.getElementById('hero')

// If all you want is for all your users to have stuff smooth scroll into view
scrollIntoView(node, { behavior: 'smooth' })

// combine it with any of the other options
scrollIntoView(node, {
  behavior: 'smooth',
  scrollMode: 'if-needed',
  block: 'nearest',
  inline: 'nearest',
})

// It returns a promise that is resolved when the animation is finished
const sequence = async () => {
  const slide = document.getElementById('slide-3')
  // First smooth scroll to hero
  await scrollIntoView(node, { behavior: 'smooth' })
  // Then we scroll to a slide in a slideshow
  return scrollIntoView(slide, { behavior: 'smooth' })
}

Credits

• smoothscroll for the reference implementation of smooth scrolling.

More documentation will be added