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

Question

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

有没有：
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，我最喜欢的用于此任务的库是modernizr。

Answer 2

如果你不想使用JS，又想支持平板电脑，可以检查设备是否支持悬停。

@media (hover: hover) {
  *::-webkit-scrollbar { /*custom styles*/ }
  *::-webkit-scrollbar-track { /*custom styles*/ }
  *::-webkit-scrollbar-thumb { /*custom styles*/ }
  *::-webkit-scrollbar-thumb:hover { /*custom styles*/ } 
}

（这样您就不必设置任意最大设备宽度阈值。）