Share
How to add Snap Scroll feature in Webflow?
Step #1
Copy the Snap Scroll <script>
Copy the script and paste it into the </body> tag of the particular page. You can do so by clicking on
- Pages on the left navigation or, by tapping (P) on your keyboard
- Select the settings icon beside the page you want to add the script in
- Scroll down, you will see a section called Before </body> tag
- Paste it here
Step #2
Set Custom Attributes
You will need to add attributes to 2 elements on the page. One is for the parent element & one for the children element.
- Parent: Add the attribute name of n-parent to the parent element (this is the element that holds all the children element that you want to experience this snap scrolling effect)
- Children: Add this attribute to the n-snap to any element inside the parent that has the attribute name of n-parent.
Step #3
Publish your site
It's highly recommended to publish your site on staging environment to make sure the script is working. Once you have confirmed it, you can publish it to your main domain.
<style>
[n-parent] {
scroll-snap-type: y mandatory;
/* This enables vertical scrolling and snap scrolling */
scroll-behavior: smooth;
/* This adds smooth scrolling transition */
scroll-snap-stop: 300s; /* This sets the time duration for the scroll snapping */
height: 100vh;
/* This sets the height of the section */
overflow-y: scroll;
/* This adds vertical scroll bar when needed */
}
[n-parent] > [n-snap] {
scroll-snap-align: start;
/* This snaps the elements to the start of the snap point */
height: 100vh;
/* This sets the height of the elements */
}
</style>
Copy Script
Get exclusive access
Our team has put in a considerable amount of time and effort to develop these resources, and we are excited to share them with our premium followers.
By subscribing, you'll stay ahead of the curve and gain valuable insights into cutting-edge WebFlow techniques.
