Avatars List Horizontally Scrolling List Of Images Css Html

Avatars List Horizontally Scrolling List Of Images Css Html

Description Script Horizontally Scrolling List

The more you explore websites on the web, the more you come across some really customized on-page experiences. 

You might have been wondering how to achieve certain advanced functionality and the answer is often this: by using an animation JavaScript library, A popular animation library nowadays is GSAP.

But just because you want to use a JavaScript Library for something, doesn’t mean you have to manually go through the HTML and CSS part as well. 

Can take over the larger part of your web design process  building and designing, which leaves you with more time to focus on custom functionality and animation.

In today’s tutorial, for instance, we’re going to show you how to scroll horizontally when actually scrolling vertically.


√ Avatars List


For this use-case, I’m interested in using the center keyword as a value for scroll-snap-align on the child items.

We Will Know To Design The Horizontally Scrollable Div Using CSS, & will see its implementation through the example. 

We can make a div horizontally scrollable by using the CSS overflow property.

There are different values in the overflow property. 

For eg, the overflow: auto; is used for adding a scrollbar automatically whenever it is required and the axis hiding procedure like overflow-x: auto; is used to make only a horizontal scrollable bar.

For horizontal scrollable bar use the x and y-axis. Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar.

The white-space: nowrap; property is used to wrap text in a single line. 

Here the scroll div will be horizontally scrollable.

In this example, we have used the overflow-y: hidden; and overflow-x: auto; 

to make div horizontally scrollable.


Script Code


√ Exemple :

Next Post Previous Post
No Comment
Add Comment
comment url