安卓上的滚动条

Question

安卓上的滚动条

3

我正在使用-webkit-scrollbar属性在iOS和Android上显示滚动条，但是在Android设备上滚动容器时，内容会根据滚动条的宽度闪烁。怎么解决这个问题？

#container {
    width: 200px;
    height: 200px;
    overflow-y: auto;
}

::-webkit-scrollbar {
    width: 5px; 
}

::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.5);
}

::-webkit-scrollbar-thumb {
    margin-right: 5px;
    border-radius: 5px;
    background: rgba(255,255,255,0.5);
}

- Diogo Cardoso

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- S Anand · Answer 1

这可以通过一点Javascript来完成。

<script>
    // Add a .touch or .no-touch class to <html> based on device capability
    document.documentElement.setAttribute('class',
        'ontouchend' in document ? 'touch' : 'no-touch');
</script>

（请确保此行代码位于 CSS 之前，否则桌面浏览器将无法对 CSS 进行样式设置。）

在 ::webkit-scrollbar-* 前加上 .no-touch 类，以确保只有非触摸设备才能获得滚动条样式，而 Android 则不会。

.no-touch ::-webkit-scrollbar {
    width: 5px; 
}
.no-touch ::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.5);
}
/* ... etc */

现在，非触摸设备将看到一个样式化的滚动条。触摸设备则不会。