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);
}
4

1 回答 1

0

这可以用一点 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 */

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

于 2013-10-26T09:22:53.123 回答