在我的应用中，我需要使用
-webkit-overflow-scrolling: touch;
因为iOS上的滚动感觉太“难”了。但是我需要隐藏滚动条。
我有这样的事情：
.container {
-webkit-overflow-scrolling: touch;
}
.container::-webkit-scrollbar {
display: none;
height: 0;
width: 0;
}
现在滚动感觉非常流畅，但是我仍然可以看到滚动条...
截至2020年5月，这是允许我在iOS Safari上隐藏水平滚动条的唯一解决方案-包括将网站作为PWA安装在主屏幕上时。
这样做的目的是使容器的高度略高于使用所需的高度padding-bottom，并剪掉在其中出现滚动条的多余空间clip-path。
这是一个片段：
.scroll-container { width: 100%; padding-bottom: 30px; white-space: nowrap; overflow: auto; clip-path: inset(0 0 30px 0); }
.item { display: inline-block; width: 150px; height: 300px; margin-right: 20px; background-color: #ddd; border-radius: 20px; } <div class="scroll-container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>这样做的缺点是增加了额外的空间，这确实压低了下面的其他元素。可以否定/防止此问题，并以负的余量防止。它不是超级干净，但是会起作用。
前任。：
.scroll-container { margin-bottom: -30px; }
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句