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 */
}
