Overflow-x

by Roberto Apasajja

HTML

<div class="container">
  <div class="overflow-x">
    <a href="#" class="btn btn-sm btn-primary">this is button</a>
    <a href="#" class="btn btn-sm btn-primary">this is button</a>
    <a href="#" class="btn btn-sm btn-primary">this is button</a>
    <a href="#" class="btn btn-sm btn-primary">this is button</a>
    <a href="#" class="btn btn-sm btn-primary">this is button</a>
    <a href="#" class="btn btn-sm btn-primary">this is button</a>
    <a href="#" class="btn btn-sm btn-primary">this is button</a>
    <a href="#" class="btn btn-sm btn-primary">this is button</a>
    <a href="#" class="btn btn-sm btn-primary">this is button</a>
    <a href="#" class="btn btn-sm btn-primary">this is button</a>
    <a href="#" class="btn btn-sm btn-primary">this is button</a>
    <a href="#" class="btn btn-sm btn-primary">this is button</a>
    <a href="#" class="btn btn-sm btn-primary">this is button</a>
    <a href="#" class="btn btn-sm btn-primary">this is button</a>
    <a href="#" class="btn btn-sm btn-primary">this is button</a>
    <a href="#" class="btn btn-sm btn-primary">this is button</a>
    <a href="#" class="btn btn-sm btn-primary">this is button</a>
    <a href="#" class="btn btn-sm btn-primary">this is button</a>
    <a href="#" class="btn btn-sm btn-primary">this is button</a>
    <a href="#" class="btn btn-sm btn-primary">this is button</a>
  </div>
</div>

CSS

.overflow-x {
	white-space: nowrap;
	overflow-x: scroll;
  overflow-y: hidden;
  padding: 20px;
  background: #ccc;
}

.overflow-x::-webkit-scrollbar {
	width: 7px;
	height: 17px;
	padding: none;
}

.overflow-x::-webkit-scrollbar-track {
	border-radius: 0;
	background: rgba(0, 0, 0, .1);
}

.overflow-x::-webkit-scrollbar-thumb {
	border-radius: 9;
	background: green;
}

.overflow-x::-webkit-scrollbar-track:hover {
	background: rgba(0, 0, 0, .3);
}

.overflow-x::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, .7);
}