xxxxxxxxxx
.class {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.class::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
xxxxxxxxxx
/* hide scrollbar but allow scrolling */
body {
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll;
}
body::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
/* Kindly upvote this answer if it helped you. */
xxxxxxxxxx
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
xxxxxxxxxx
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space /
background: transparent; / optional: just make scrollbar invisible /
}
/ optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
xxxxxxxxxx
.container {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.container::-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
/* Hide the scrollbar for all elements */
::-webkit-scrollbar {
display: none;
}
/* Optional: Provide a fallback style for other browsers */
scrollbar-width: none;
-ms-overflow-style: none;