如何在移动设备上隐藏自定义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; 
}

- Hannah

---

试试CSS媒体查询。 :) - user5039044

Answer 1

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

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

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

}

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

- Mikl

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*/ } 
}

这样你就不必设置一个任意的最大设备宽度阈值。

在这种情况下，悬停意味着方便的悬停。一些手机和平板电脑通过长按来支持基本的悬停，但这些不算数。

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover#none

- Jan Feldmann