How to hide scrollbar in CSS but still scroll

CSS Hide scroll bar
CSS Hide scroll bar
  • Post author:
  • Post last modified:July 10, 2020
  • Reading time:2 mins read

CSS hide scrollbar when not scrolling

.parent-element{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.child-element{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px;
    box-sizing: content-box;
}

Hide CSS Scrollbar yet retain functionality

Hide scrollbar but keep functionality to scroll the web page or specific element of HTML.

.example {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow-y: scroll; /* Add the ability to scroll */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}

Credit W3Schools
Top 5 CSS frameworks

Ayat UR Rehman

I'm a self-taught programmer and professionally studying Accounting and Finance. I love blogging to explore the world. It gives a chance to learn several things from different systems.

Leave a Reply