![]() ![]() Let’s take a closer look and explain what each one does, where it is defined, and what kinds of values are accepted. The current Scroll Snap specification contains only four properties and each one plays an important role. Now it’s time to review and explain the actual properties with regards to their syntax and accepted values. Here’s a second demo showcasing the y-axis to display imagery in a gallery-esque fashion.Īs the user scrolls horizontally, the momentum lands dead center of the scrollport and snap area region regardless of the image size. Notice as I scroll there is a point where the scroll momentum takes over and advances to the next box. If you don’t have Safari 11 on your system here’s a screen recording showing the live demo functionality provided above. ![]() The demo above takes advantage of the y-axis as the snap position however, you could do it just as easily in the x-axis. It’s also good to note that any scroll container will require another familiar CSS property defined known as overflow. The example below showcases only the very minimal properties required to initiate the CSS Scroll Snap behavior and doesn’t include any polyfills as I was unable to find a working polyfill that functioned with the most recently published syntax. Scroll Snap DemosĪt the time of this writing it’s best to view the following demos with Safari 11 as other browsers (while noted to support) don’t actually have full support with the new syntax, in spite of data from caniuse and personal testing. There’s also an interesting update from the Modules August 2017 CR specification which states some intriguing behavior that :target should possess. If you’d like to read more about other types of use cases you can start with this W3C example using a photo gallery as its demonstration case, and here as well. ![]() With the terminology out of the way let’s review some examples and explore how this functionality works in real life. Each snap area contains a “snap position” also defined by the “snap position” of the scroll container and represented by the red dotted line in the diagram above. The intentions are to help enforce the scroll positions that a scroll container’s scrollport will end at after a scrolling operation has completed.Įach item of this “snapport” is referred to as a “snap area”, and is the object(s) you’ll be targeting. This is the region where your scroll snapping behavior resides as indicated in the diagram above (outer dashed border). Scroll snap takes place within a “snapport” or “scrollport” however, both mean the same, and can also be referenced as a “scroll container”. Doing so will also help avoid confusion when these new terms are used throughout this tutorial. To fully understand the power of scroll snapping and how it works, we need to understand its terminology. The W3C recently released Scroll Snap as a Candidate Recommendation that includes well-thought out implementations and examples along with updated syntax. ![]() It will enforce where a scroll position ends after a scrolling operation has completed.Īmongst other things, this module contains features to control facets such as panning, combined with “snap positions”, and produces a particular alignment of content within a scrolling container. It can be difficult for web developers to guarantee a well-controlled scrolling experience, but luckily a CSS module entitled “Scroll Snap” promises to help. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |