Learn how to scroll categories horizontally in your Website or App:
- Create a file test-scroll.html
- Copy below code and paste into it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
<title>Scroll</title>
<style>
.category-block:focus {
background-color:yellow;
}
</style>
</head>
<body>
<div>
<h1>Horizontal Scroll Categories</h1>
<div>
<a href="#">
<span>
<span>reiciendis voluptatibus maiores</span>
</span>
</a>
<a href="#">
<span>
<span>denouncing pleasure</span>
</span>
</a>
<a href="#">
<span>
<span>Finibus Bonorum et</span>
</span>
</a>
<a href="#">
<span>
<span>voluptate velit esse</span>
</span>
</a>
<a href="#">
<span>
<span>Informatica e Tecnologia</span>
</span>
</a>
<a href="#">
<span>
<span>Lorem Ipsum is</span>
</span>
</a>
<a href="#">
<span>
<span>unknown printer took</span>
</span>
</a>
<a href="#">
<span>
<span>Hampden-Sydney College</span>
</span>
</a>
<a href="#">
<span>
<span>Extremes of Good and Evil</span>
</span>
</a>
<a href="#">
<span>
<span>repeat predefined chunks</span>
</span>
</a>
<a href="#">
<span>
<span>Contrary to popular belief</span>
</span>
</a>
<a href="#">
<span>
<span>desktop publishing software</span>
</span>
</a>
<a href="#">
<span>
<span>discovered the undoubtable</span>
</span>
</a>
<a href="#">
<span>
<span>Letraset sheets containing</span>
</span>
</a>
<a href="#">
<span>
<span>Finibus Bonorum et Malorum</span>
</span>
</a>
<a href="#">
<span>
<span>aliquam quaerat voluptatem</span>
</span>
</a>
</div>
</div>
</body>
</html>
- Create a file style.css
- Copy below code and paste into it.
.scroll-block {
padding-top: 50px;
text-align: center;
font-family: sans-serif;
}
.category-block {
display: inline-block;
text-decoration: none;
padding-bottom: 5px;
padding-top: 5px;
}
.category-block:hover {
text-decoration: none;
}
.scroll-category {
color: #646080;
background-color: #e9e9e9;
padding: 6px 14px;
border-radius: 20px;
display: flex;
align-items: center;
border: 1px solid #b0b0bd;
}
.scroll-category.active {
background: rgb(173, 95, 169);
color: rgb(255, 255, 255);
}
.categories-block {
margin-top: 10px;
overflow: auto;
white-space: nowrap;
}
.categories-block::-webkit-scrollbar {
height: 8px;
background-color: #e9e9e9;
margin-top: 5px;
}
.categories-block::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #e9e9e9;
}
