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
By combining the app and web data in Google Analytics 4, app analysis has become more easily trackable. Firebase Analytics allows you to easily track your iOS or Android app with GA4. With numerous different tools available for mobile app tracking, being able to see both web and app data within the same property is […]
Read More
Mid Level Web/App AnalyticsBusinesses want to use as much data as possible from analytics and marketing cookies. However, in order to collect and use this data, they need to comply with laws such as KVKK/GDPR. By enabling Cookie Mode, Google helps to use cookies according to the level of consent. In other words, with Cookie Mode, users’ privacy […]
Read More
Mid Level Web/App AnalyticsSEO is the optimization made to rank first in targeted keywords. Thanks to these optimizations, it is aimed at search engine bots and users to understand the site more easily. SEO works are divided into four on-site SEO, off-site SEO, technical SEO, and user experience. When these issues are done in a planned manner without […]
Read More
SEODigital Collage in Graphic Design: Push the Limits of Creativity Today, graphic design is constantly redefining itself as an innovative dimension of digital art. An important reflection of this evolution is seen in the art of digital collage. The process of combining visual elements and creating meaning in the digital environment serves as a powerful […]
Read More
Mid Level UX/UI & Graphic Design