html how to make sideways scrolling list code example
Example 1: horizontal scroll html
<div class="scrolling-wrapper">
<div class="card"><h2>Card</h2></div>
<div class="card"><h2>Card</h2></div>
<div class="card"><h2>Card</h2></div>
<div class="card"><h2>Card</h2></div>
<div class="card"><h2>Card</h2></div>
<div class="card"><h2>Card</h2></div>
<div class="card"><h2>Card</h2></div>
<div class="card"><h2>Card</h2></div>
<div class="card"><h2>Card</h2></div>
</div>
.scrolling-wrapper {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
.card {
display: inline-block;
}
}
Example 2: horizontal scroll menu fade edges
.navbar
float: left
height: 40px
min-width: 100%
display: flex
flex-wrap: wrap
.navbar-item
padding: 13px 0px
font-size: 12px
line-height: 14px
text-transform: uppercase
display: inline-block
float: left
margin: 0px 10px
&.active
padding: 13px 0px 11px 0px
border-bottom: 2px solid $light-blue
&:hover
cursor: pointer
a
color: $dark-grey
font-weight: 600
text-decoration: none