溢出-x：自动导致下面的额外空间？答案

【问题标题】：overflow-x: auto cause extra space below?溢出-x：自动导致下面的额外空间？
【发布时间】：2022-03-15 19:34:03
【问题描述】：

看这个！ "overflow-x: auto;" 时有一个红色的上方空白区域被激活。如何删除此空间并仍然在移动设备上滑动视图？

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
}

小提琴：http://jsfiddle.net/nposqt8x/

【问题讨论】：

标签： css touch

【解决方案1】：

修改滚动条的height如下图：

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

在应用溢出时完美运行。

JsFiddle link

【讨论】：

没错。你的代码帮助我解决了这个问题。谢谢

【解决方案2】：

我也遇到了同样的问题：overflow-x: auto;

我改用：overflow-x: clip; 解决了这个问题。

它做同样的事情（对我来说：删除过度滚动）没有下面的空间。

【讨论】：