css - 溢出-x:自动导致下面的额外空间?
问题描述
看看这个!"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/
解决方案
推荐阅读
- gcc - 配置 FFTW `configure: error: don't know how to enable OpenMP`
- c++ - 如何使用函数作为参数重载 operator<<(如 cout 的 endl)?
- html - 垂直滚动在我的应用程序中不起作用,角度为 10
- css - 防止网格列中的换行
- java - Java使用长纪元时间戳来检测日变化的最有效方法
- java - Eclipse 2020-12,RCP 项目导出失败
- java - ByteBuddy - 创建代理,但将原始对象作为字段
- sql - SQL - 如果满足使用多个先前列的条件,则 LAG 获取先前值
- python - 多线程是在 pysimplegui 脚本中跟踪经过时间的唯一方法吗?
- angular - Angular Ionic ngIf 检查是否包含不适用于与父数组的比较