小程序使用::-webkit-scrollbar { width: 0px; height: 0px; }隐藏了滚动条,安卓手机显示没有,苹果显示有滚动条如何解决
时间: 2023-12-06 07:45:09 浏览: 38
在移动端浏览器上,一些 CSS 样式可能会因为不同浏览器的兼容性问题而出现不同的结果。在这种情况下,我们可以使用特定于移动端的 CSS 属性来解决。
针对你的问题,可以尝试使用下面的 CSS 属性来隐藏滚动条:
```
/* 隐藏滚动条 */
overflow: scroll;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
```
这样,无论是在安卓手机还是苹果手机上,都能够正确地隐藏滚动条。
相关问题
::-webkit-scrollbar伪元素来让滚动条自适应大小
`::-webkit-scrollbar`伪元素可以用来选择滚动条元素,并设置其样式,但是它不能让滚动条自适应大小。要让滚动条自适应大小,可以使用`::-webkit-scrollbar`伪元素的`width`属性和`height`属性来设置滚动条的宽度和高度。
具体步骤如下:
1. 首先,为滚动条元素设置一个基础样式,例如:
```css
::-webkit-scrollbar {
background-color: #f0f0f0;
width: 10px;
height: 10px;
}
```
在上面的样式中,我们将滚动条的背景颜色设置为灰色,宽度和高度都设置为10px。
2. 接着,可以使用CSS的`calc()`函数和`100%`单位来计算滚动条的宽度和高度,例如:
```css
::-webkit-scrollbar {
background-color: #f0f0f0;
width: calc(100% - 20px);
height: calc(100% - 20px);
}
```
在上面的样式中,我们使用`calc()`函数计算滚动条的宽度和高度,减去了一个20px的边框宽度,这样就可以让滚动条自适应大小。
3. 最后,可以为滑块和轨道等滚动条的不同部位设置样式,例如:
```css
::-webkit-scrollbar {
background-color: #f0f0f0;
width: calc(100% - 20px);
height: calc(100% - 20px);
}
::-webkit-scrollbar-thumb {
background-color: #007bff;
}
::-webkit-scrollbar-track {
background-color: #e9ecef;
}
```
在上面的样式中,我们为滑块设置了蓝色的背景颜色,为轨道设置了灰色的背景颜色。
需要注意的是,只有Chrome和Safari浏览器支持`::-webkit-scrollbar`伪元素。如果需要在其他浏览器中实现滚动条自适应大小,可以使用一些第三方库或者自定义滚动条的插件来实现。
el-table__body-wrapper &::-webkit-scrollbar修改滚动条颜色
可以通过以下方式修改 el-table__body-wrapper 中的滚动条颜色:
```css
.el-table__body-wrapper::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #f5f5f5;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: #c1c1c1;
}
```
其中,`::-webkit-scrollbar` 是用于设置滚动条的整体样式,`::-webkit-scrollbar-thumb` 是用于设置滚动条的滑块样式。你可以根据自己的需要进行修改。