28.07.2022
As the use of mobile and tablets on websites increased, the touch feature became more crucial for UI / UX. Using moving or scrolling effects has become more common both in sliders or galleries and in other sections of your webpage.
Normally, sliders or galleries scroll with smooth effects thanks to frameworks such as Bootstrap in CSS. It is also possible to use the CSS Scroll Snap feature to give similar effects in divs, sections, buttons, etc if they tend to scroll horizontally or vertically.
My first step was using the display: flex and overflow-x: auto definitions are made for the container of the area we want to slide. Contents have to align horizontally or vertically and overflow: auto out of its container.
<div class="section"> <div class="sub_div div_1">Item 1</div> <div class="sub_div div_2">Item 2</div> <div class="sub_div div_3">Item 3</div> <div class="sub_div div_4">Item 4</div> <div class="sub_div div_5">Item 5</div> <div class="sub_div div_6">Item 6</div> <div class="sub_div div_7">Item 7</div> <div class="sub_div div_8">Item 8</div> <div class="sub_div div_9">Item 9</div> <div class="sub_div div_10">Item 10</div> </div>
.section {
display: flex;
overflow-x: auto;
}
Now we have a scrolling container.
But, the containers don’t scroll smoothly. When you force them to move with your touch, they will scroll as long as it takes without anything stopping them. To prevent that, we need to add two more properties, one to section and sub divs per each.
To container: scroll-snap-type: x mandatory;
To sub divs: scroll-snap-align: start;
With the scroll-snap-type, we specified if an element is a scroll snap container and whether it snaps on the x-axis or y. For example, if we would’ve build a mobile layout, our scroll-snap-type would be y. As mandatory, we said that the scrolling must snap to a specified point (its starting point in our example) of its container every time, no matter how we forced it to scroll with our touch.
Scroll-snap-aling determines if the div’s at least 50% appears in the container, it will align itself automatically to the left. Otherwise, it will scroll aside and leave the aligning point to the next child element.
In the example above align was determined as start and zeroed to the left. Center or end also can be used. In this case, the floating area will automatically stop itself according to that alignment.
scroll-snap-align: end;
scroll-snap-align: center;
You may prefer to use padding and margin in both container and sub divs for a more user-friendly design. Also, these properties may be defined with scroll-padding and scroll-margin just like using flex: the gap in flexbox to make your code cleaner and readable.
You can redesign your layout to a mobile view by using a scroll snap on the y-axis. In the example below, I gave a height of 100vh to the container to ensure that will cover all screens. After that, all sub divs are aligned in descending order with flex-direction: column. I determined that all divs will scroll horizontally with scroll-snap-type: y mandatory. Finally, I specified each div’s height as 70vh and aligned them centered with scroll-snap-align: center.
.section {
height: 100vh;
flex-direction: column;
overflow-y: auto;
scroll-snap-type: y mandatory;
}
.sub_div {
height: 70vh;
scroll-snap-align: center;
}
What I like about scroll-snap is that it helps thinking about design where cards, texts, icons, and sections become more dynamic and even movable. So the page can become more dynamic with mobile / tablet use without spending so much time.
You can verify the usage of scroll-snap with many examples. I mostly tried to show its help in aligning and scrolling aspects. You can also use Javascript APIs or events with these properties and make your page more dynamic.
Perfist Blog
Similar Articles
What is SEO Analysis? SEO analysis is a detailed examination of a website’s performance in search engines. This analysis provides insights into the site’s current status and highlights areas needing improvement. SEO analysis is essential for defining a roadmap and building a successful strategy. Accurate analysis clarifies which keywords to focus on, how to resolve […]
Read More
Mid Level SEOWhat is Search Intent? Search intent refers to the underlying goal a user has when performing a search query. Google and other search engines do not just focus on keywords but also analyze their context to understand what users are really looking for. Search intent is generally categorized into four main types: informational, navigational, commercial […]
Read More
SEOWhat is Semantic SEO? Semantic SEO is an optimization approach that helps search engines better understand user intent. This method analyzes the relationships between words, context, and the purpose behind user queries, ensuring more accurate content matching. Based on our extensive experience in digital marketing, we can confidently say that content created with a semantic […]
Read More
SEOWhat is Site Speed? Site speed refers to how quickly a web page loads. (Site speed has multiple factors. The most important of these are initial load time and load speed.) This speed directly affects the visitor experience. A slow-loading site can cause users to leave the site and choose other pages. Additionally, search engines […]
Read More
Mid Level SEO