<scrollsnap-controls>

Helper for use with a CSS Scrollsnap element. Adds indicator buttons and handlers for Prev/Next buttons.

POC: Really rushed and unloved demo: https://codepen.io/georgeadamson/pen/VwPrwyY?editors=1100

Using this component

After adding a script you can use this compoennt just like any other html element.

Add a script tag similar to this:

<script type="module" src="https://cdn.jsdelivr.net/npm/scrollsnap-controls/dist/esm/scrollsnap-controls.min.js"></script>

...then you can use the element like this:

<scrollsnap-controls for="my-slider" prev="my-slider-prev" next="my-slider-next" polyfill aria></scrollsnap-controls>

| This component is an experimental POC with caveats...!

• Only tested with horizontal scrollsnap.
• Assumes all scroll items are the same width.

---

Props/Attributes for using <scrollsnap-controls>

For latest see the component readme.

Properties

Property	Attribute	Description	Type	Default
aria	aria	Optional: When set, the component will toggle aria attributes on the scrollsnap elements. This can be helpful to screenreaders but scenarios vary.	boolean	undefined
currentDot	current-dot	Optional: Specify a character or markup for the "current" page indicator dot.	(() => void) | string	'🔘'
currentIndex	current-index	Readonly: Attribite to surface the index of the current page.	number	0
dot	dot	Optional: Specify a character or markup for an indicator dot.	(() => void) | string	'⚪️'
htmlFor (required)	for	Required: id or CSS selector for your scrollsnap element.	string	undefined
keys	keys	Experimental: When set, the component will attempt better paging of the scrollsnap using the ← → arrow keys.	boolean	undefined
next	next	Optional: id or CSS selector for your "Next" button.	string	undefined
polyfill	polyfill	Optional: When set, the component will fetch polyfills for browsers that do not support smoothscroll natively. (Eg Safari, Edge, IE11)	boolean	undefined
prev	prev	Optional: id or CSS selector for your "Previous" button.	string	undefined

---