xxxxxxxxxx
.class-called-body::webkit-scrollbar{
display: none;
}
xxxxxxxxxx
.class {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.class::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
If you want to hide the scrollbar in other browsers, you can use the scrollbar-width property with a value of none, like this:
xxxxxxxxxx
/* Hide scrollbar in other browsers */
.container {
overflow: auto;
scrollbar-width: none;
}
/* Hide scrollbar in Chrome and Safari */
.container::-webkit-scrollbar {
display: none;
}
xxxxxxxxxx
/* Hide scrollbar but still allow scrolling */
body {
overflow: auto;
}
/* Hide scrollbar */
body::-webkit-scrollbar {
width: 0.5em;
}
body::-webkit-scrollbar-track {
background: #f1f1f1;
}
body::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 1em;
}
xxxxxxxxxx
/* Hide scrollbar when not needed */
.container {
overflow: auto;
}
.container::-webkit-scrollbar {
display: none;
}
This code sets the overflow property of the .container element to auto, which will display the scrollbar only when the content inside the container exceeds its height. When the scrollbar is not needed, the ::-webkit-scrollbar pseudo-element is set to display: none, which hides the scrollbar. Note that this only works in WebKit-based browsers such as Chrome and Safari.
xxxxxxxxxx
//Hide scrollbar completly (vertical & horizontaly) scrollbar but still able to scroll
/* replace ".container" with your "id" or "className" */
.container {
-ms-overflow-style: none;
scrollbar-width: none;
}
.container::-webkit-scrollbar {
display: none;
}
xxxxxxxxxx
-webkit- (Chrome, Safari, newer versions of Opera):
.element::-webkit-scrollbar { width: 0 !important }
-moz- (Firefox):
.element { overflow: -moz-scrollbars-none; }
-ms- (Internet Explorer +10):
.element { -ms-overflow-style: none; }
xxxxxxxxxx
/*Auto hide scrollbar for PC only*/
@media (min-width:576px) {
/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbars::-webkit-scrollbar {
/*display: none; to completely hide the scrollbar*/
-webkit-appearance: none;
width: 4px; /*scrollbar width for vertical one*/
height: 4px; /*scrollbar width for horizontal one*/
}
.hide-scrollbars::-webkit-scrollbar-thumb {
visibility: hidden;
border-radius: 2px;
background-color: rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .1);
}
.hide-scrollbars::-webkit-scrollbar-thumb:hover {
visibility: visible;
}
/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbars{
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
}