jquerycssscroll-snap-points

JS Check if Browser Supports CSS Snap Points

Is there a simple way to check if a browser supports CSS Snap Points. I've set up a fail safe for a horizontal gallery but I'd like to turn off all the Javascript if the browser already natively supports snap points.

Also, are there any decent polyfills that might do a better job of what I've built here.

Solution

  • Try checking document.body style for "scroll-snap-type" property

      if ("scroll-snap-type" in document.body.style) {
    // do stuff with `scroll-snap-points`
  } else {
    // `scroll-snap-points` not supported
  }