'overflow-x: auto cause extra space below?

Look this! there is a red upper white space when "overflow-x: auto;" be activated. How to remove this space and still slide across the view on the mobile?

HTML

<div class="content">
<ul class="crumb no-scrollbar">
<li>Home</li>
<li>Category1</li>  
<li>Category2</li>  
<li>Category3</li>
<li>Category4</li>
<li>Category5</li>
<li>Category6</li>
<li>Category7</li>
<li>Category8</li>
<li>Category9</li>
<li>Category9</li>
</ul>
<div class="desr">
</div>
</div>

CSS

.crumb {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    white-space: nowrap;
}

.crumb li {
    display: inline-block;
}
.desr {
  height: 500px;
  background-color: red;
}
.no-scrollbar::-webkit-scrollbar{
    width: 0;
}
.no-scrollbar::-webkit-scrollbar-track{
    background:transparent
}
.no-scrollbar::-webkit-scrollbar-thumb{
    background:transparent
}

Fiddle: http://jsfiddle.net/nposqt8x/

csstouch


Solution 1:[1]

Altered the height of scrollbar as shown below:

.no-scrollbar::-webkit-scrollbar{
    width: 0;
    height: 0;
}

Works perfectly when overflow is applied.

JsFiddle link

Solution 2:[2]

I had the same issue by using : overflow-x: auto;

I fixed that by using : overflow-x: clip; instead.

It does the same thing (for me : remove the over scrolling) without the space below.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Allan Jebaraj
Solution 2 s. el-yamani ?. ???????

Related Questions