You can hide a scrollbar and allow scrolling, hide it and disable scrolling, or hide the scrollbar until it is needed. In this guide, you will get to see various techniques of hiding scrollbar in CSS.
HTML
<div class="wrapper">
<div class="item">box1</div>
<div class="item">box2</div>
<div class="item">box3</div>
<div class="item">box4</div>
<div class="item">box5</div>
<div class="item">box6</div>
</div>(code-box)
CSS
.wrapper{border: 1px solid #ccc; display: flex; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth;}
.wrapper::-webkit-scrollbar{width: 0; }
.wrapper .item{width: 250px; line-height: 110px; text-align: center; background-color: #ccc; margin-right: 2px;}(code-box)
It’s with the scrollbar. Can we scroll the contents without a scrollbar?
{
overflow: auto;
}(code-box)
This will work? This works smooth but the scrollbar visibility isn’t taken care of while scrolling.
::-webkit-scrollbar {
width: 0px;
background: transparent;
}(code-box)
