body{
overflow: hidden;
}The above CSS will hide the scrollbars (both vertical & horizontal).
How to hide horizontal scrollbar in CSS
You need to make overflow hide in the x-axis (horizontal direction) to do that. See the CSS as an example:
body{
overflow-x: hidden;
}How to hide vertical scrollbar in CSS
The following (below) CSS will hide the vertical scrollbar:
body{
overflow-y: hidden;
}Note that ‘overflow-y: hidden‘ will also prevent you from scrolling.
Do you need to hide the scrollbar & want to scroll? Keep reading.
How to hide scrollbar with CSS but still scroll
In this case, we can apply a simple trick. This is a two-step process. In the first step, we can tell the web browser to enable scrolling. And in the second step, we can make the scrollbar’s width “0” (zero). See the two lines of CSS below:
body {overflow: scroll;}
::-webkit-scrollbar {width: 0;}OR
html {overflow: scroll;}
::-webkit-scrollbar {width: 0;}It’s always good practice to add CSS vendor prefixes to make it work on all web browsers. If you are using the Autoprefixer extension with SASS, then you don’t have to add vendor prefixes manually. Otherwise, use the Autoprefixer online tool or write them manually.
Related: How to style scrollbar using CSS?
