How to make scrollbar invisible

user_17502196 0
Viewed 585

I was making a website and I thought that the navbar would result too big in smaller devices. I found out how to make it scrollable but I don't like the fact that it shows a new scrollbar next to it. How can I make that invisible?

css html javascript
3 Answers

Add overflow: hidden; to the css tag to hide both the horizontal and vertical scrollbar.

Example

body {
overflow: hidden; /* Hide scrollbars */
}

To only hide the vertical scrollbar, or only the horizontal scrollbar, use overflow-y or overflow-x:

Example

body {
overflow-y: hidden; /* Hide vertical scrollbar /
overflow-x: hidden; / Hide horizontal scrollbar */
}
user_145429320

You Can Use This:

::-webkit-scrollbar {
    display: none;
}

But it's not supported in Firefox and IE/Edge. :)

user_132872950

Add this in your CSS


.classname::-webkit-scrollbar {
    display: none; /* for Chrome, Safari and Opera */
}

.classname{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
user_174862340
Related