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 for Chrome, Safari and Opera */
.scrollbar-hidden::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge add Firefox */
.scrollbar-hidden {
-ms-overflow-style: none;
scrollbar-width: none; /* Firefox */
}
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
/* A very quick an applicable solution is to use this piece of code: */
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
/* hide scrollbar but allow scrolling */
element {
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
overflow-y: scroll;
}
element::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
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 */
}
xxxxxxxxxx
.container {
overflow-y: scroll;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
width: 0;
height: 0;
}
xxxxxxxxxx
/*cleanest solution*/
.element::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
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;
}