How to hide scrollbar in CSS but still scroll

CSS Hide scroll bar
  • Post author:
  • Post comments:0 Comments
  • Post last modified:July 10, 2020
  • Reading time:1 min(s) 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

Advertisements

Ayat UR Rehman

I Love Blogging From The Core Of My 💓 Because It is Excitable And Passionate My Hobby (* Learning About The CS With The Intensity *). The Innovations In Technology Inspire Me To Achieve My Goals. 💭🤔

Leave a Reply