仅在移动设备中隐藏自定义css滚动条？

Question

我不确定这是否可行，但我使用 webkit 制作了一个自定义滚动条，该滚动条不会在移动设备上显示，因此屏幕右侧应该有一个间隙（相反，默认镀铬一出现）。它在桌面上显示得非常好。

是否有：
a) 使此滚动条显示在 chrome 移动浏览器上。
b）仅在移动设备上隐藏自定义滚动条，因此不会出现间隙，但也允许自定义滚动条同时显示在桌面上。

::-webkit-scrollbar-thumb {
width:5px;
background-color:black;
}
 
::-webkit-scrollbar {
width:5px;
background-color:white;
}

::-webkit-scrollbar-track {
    border-radius: 5px; 
    background-color: white; 
}

Answer 1

如果你只想要 css 解决方案，你可以使用这样的媒体查询：

@media only screen and (max-device-width: 736px) {

  ::-webkit-scrollbar-thumb,
  ::-webkit-scrollbar,
  ::-webkit-scrollbar-track {
    //default styles
  }

}

但是如果你想检测触摸屏，你需要使用一些js，我最喜欢这个任务的lib是modernizr。