How do I remove the horizontal scrollbar in a div?
HtmlCssOverflowHorizontal ScrollingHtml Problem Overview
When I set overflow: scroll
, I get horizontal and vertical scrollbars.
Is there a way to remove the horizontal scrollbar in a div?
Html Solutions
Solution 1 - Html
overflow-x: hidden;
Solution 2 - Html
Don't forget to write overflow-x: hidden;
The code should be:
overflow-y: scroll;
overflow-x: hidden;
Solution 3 - Html
CSS
overflow-y: scroll;
Notice if you remove the -y
from the overflow-y
property, the horizontal scroll bar is shown.
Solution 4 - Html
With overflow-y: scroll
, the vertical scrollbar will always be there even if it is not needed. If you want y-scrollbar to be visible only when it is needed, I found this works:
.mydivclass {overflow-x: hidden; overflow-y: auto;}
Solution 5 - Html
Add this code to your CSS. It will disable the horizontal scrollbar.
html, body {
max-width: 100%;
overflow-x: hidden;
}
Solution 6 - Html
To hide the horizontal scrollbar, we can just select the scrollbar of the required div and set it to display: none;
One thing to note is that this will only work for WebKit-based browsers (like Chrome) as there is no such option available for Mozilla.
In order to select the scrollbar, use ::-webkit-scrollbar
So the final code will be like this:
div::-webkit-scrollbar {
display: none;
}
Solution 7 - Html
No scroll (without specifying x or y):
.your-class {
overflow: hidden;
}
Remove horizontal scroll:
.your-class {
overflow-x: hidden;
}
Remove vertical scroll:
.your-class {
overflow-y: hidden;
}
Solution 8 - Html
To remove the horizontal scroll bar, use the following code. It 100% works.
html, body {
overflow-x: hidden;
}
Solution 9 - Html
If you don't have anything overflowing horizontally, you can also just use
overflow: auto;
and it will only show scrollbars when needed.
Solution 10 - Html
overflow-x:hidden;
However, it may happen that your content on the website may not show. So best to inspect element and check the widths of your divs or sections, and remove any right/left margins it may have put in extra. Much better solution
Solution 11 - Html
Removes the HORIZONTAL scrollbar while ALLOWING for scroll and NOTHING more.
&::-webkit-scrollbar:horizontal {
height: 0;
width: 0;
display: none;
}
&::-webkit-scrollbar-thumb:horizontal {
display: none;
}
Solution 12 - Html
Use:
overflow: auto;
This will show the vertical scrollbar and only if there is a vertical overflow, otherwise, it will be hidden.
If you have both an x and y overflow, then both x and y scrollbars will be shown.
To hide the x (horizontal) scrollbar, even if present simply add:
overflow-x: hidden;
body {
font-family: sans-serif;
}
.nowrap {
white-space: nowrap;
}
.container {
height: 200px;
width: 300px;
padding 10px;
border: 1px solid #444;
overflow: auto;
overflow-x: hidden;
}
<div class="container">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li class="nowrap">Item 8 and some really long text to make it overflow horizontally.</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
</ul>
</div>
Solution 13 - Html
To hide the scrollbar
, but keep the behaviour.
div::-webkit-scrollbar {
width: 0px;
background: transparent;
}
There are limitations to this.
Solution 14 - Html
Use This chunk of code..
.card::-webkit-scrollbar {
display: none;
}
Solution 15 - Html
Hide Scrollbars
go to any browser for example Google Chrome step 1:
click on keyboard ctrl+Shift+i inspect use open tools Developer
Focused mouse on the div and change style div use try this: step 2:
overflow: hidden; /* Hide scrollbars */
now go to add file .css in project and include file
Solution 16 - Html
I had been having issues where I was using
overflow: none;
But I knew CSS didn't really like it and it didn’t work 100% for how I wanted it to.
However, this is a perfect solution as none of my content is supposed to be larger than intended and this has fixed the issue I had.
overflow: auto;