2

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?

Hilex23
  • 337
  • 2
  • 11
  • The scrollbar is an important accessibility control. On touch input devices, the scroll bar shouldn't be persistent (e.g. on iOS/Android it disappears when not in use). On desktop, the presence of it is controlled by the operating system settings. What if a user has no touch input, and only a mouse with no scroll wheel? How will they move the view? Consider styling it in a more subtle way instead. – jsejcksn Dec 02 '21 at 15:33
  • @jsejcksn Thanks for the feedback but I would appreciate it if instead you told me another way of styling since I started coding just a month and a half ago and I'm not really good. – Hilex23 Dec 02 '21 at 15:36
  • @jsejcksn Such a user won't survive in the modern world. – Teemu Dec 02 '21 at 15:46
  • @Hilex23 Here are some resources: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars), [CSS-Tricks](https://css-tricks.com/almanac/properties/s/scrollbar/) – jsejcksn Dec 02 '21 at 15:52

3 Answers3

3

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 */
}
Vaxind
  • 96
  • 1
  • 1
  • 7
2

You Can Use This:

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

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

Anas Hassan
  • 51
  • 5
1

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 */
}
Ntsikelelo Metseeme
  • 64
  • 2