html ios 滚动条隐藏,CSS溢出滚动和隐藏滚动条（iOS）
6 个答案:
答案 0 :(得分：5)
我只是玩了这个codepen(https://codepen.io/devstreak/pen/dMYgeO)，看来如果你为下面的所有三个属性设置background-color到transparent，滚动(在这个例子中)同时删除box-shadow s)，根本看不到滚动条：
#style-1::-webkit-scrollbar-track
{
// -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
background-color: transparent;
}
#style-1::-webkit-scrollbar
{
background-color: transparent;
}
#style-1::-webkit-scrollbar-thumb
{
// -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: transparent;
}
这已经在iPhone 6 +上的Chrome桌面，Chrome for Android和iOS Safari(v8.4)中进行了测试。
但是我会建议用户体验(可用性/可访问性)来保持滚动条可见，因为即使我知道我在做什么，但在没有滚动条时会有点困惑。
答案 1 :(得分：4)
截至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; }
这样做的缺点是增加了额外的空间，这确实压低了下面的其他元素。此问题可以否定/以负的利润预防。它不是超级干净，但是会起作用。
例如：
.scroll-container { margin-bottom: -30px; }
答案 2 :(得分：3)
正如其他人所提到的那样，这可行：
.container ::-webkit-scrollbar {
display: none;
}
将其范围限定在要隐藏而不是全局使用的滚动条的父容器中可能是个好主意。
答案 3 :(得分：1)
在撰写本文时(2019年)，我认为处理此问题的唯一方法是使用溢出来隐藏滚动条。
/* box-sizing reset */
* {
box-sizing: border-box;
}
/*
scroll container with overflow
set to hidden
*/
.container {
overflow: hidden;
width: 80vw;
height: 20vh;
outline: 1px solid;
}
/*
scroller overflowing the container by 2rem
and a 2rem bottom padding to make content
match the container height
*/
.scroller {
display: flex;
height: calc(100% + 2rem);
padding-bottom: 2rem;
overflow-y: hidden;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
}
/*
slides
*/
.slide {
flex: 1 0 100%;
scroll-snap-align: center;
display: flex;
justify-content: center;
align-items: center;
}
/* just a bit of color */
.a {
background: orangered;
}
.b {
background: gold;
}
.c {
background: olive;
}
答案 4 :(得分：0)
答案 5 :(得分：0)
只需设置普通CSS的样式，我不知道为什么它能完美工作...
.list {
white-space: nowrap;
overflow-x: scroll;
padding-bottom: 15px;
margin-bottom: -15px;
-webkit-overflow-scrolling: touch;
}
.list .item {
display: inline-block;
width: 80%;
}