All the examples I find online are for small scrolling boxes displayed within another page. I want to snap the whole window/viewport to some divs that are stacked vertically. For example:
[ content, scroll normally ]
[ "scroll snap" to this div ]
[ "scroll snap" to this div ]
[ "scroll snap" to this div ]
[ content, scroll normally ]
To clarify, there is no "fixed" content and the divs I want to "snap" are just rectangles like maybe 300x700.
I tried adding scroll-snap-type: y mandatory; to the parent container of the divs, doesn't work in Firefox 69. I also tried adding scroll-snap-type: y mandatory; to the "body and "html" and that doesn't work either. Can you show me any example using "scroll-snap-type" on the whole window?
I gave up and looked for a Javascript alternative, but it seems like development of Javascript solutions slowed/stopped after this was added to browsers with CSS. I tried "Scrollify" for jQuery but it has glitches and doesn't work that well.
The code would look something like this.
<style>
#container { scroll-snap-type: y mandatory; }
#container div {
width: 300px;
height: 700px;
scroll-snap-align: center;
}
</style>
<div>this content scrolls normally</div>
<div id="container">
<div>snap to here</div>
<div>snap to here</div>
<div>snap to here</div>
</div>
<div>this content scrolls normally</div>
Why doesn't this work?
I found an example of what I'm trying to do... https://snap.glitch.me/product.html but I'm looking for a more barebones example so I can figure out what my code is missing. Supposedly, the only two required CSS elements are "scroll-snap-type" and "scroll-snap-align" but it seems like something else is required to make this work.