Question

我创建了一个自定义滚动条样式，我希望能够使用Chrome Android“抓住”它（通过点按并拖动它）。它可以在桌面上运行，但是使用移动仿真却无法获得它。

我在这里创建了一个JS小提琴： https://jsfiddle.net/dr8g4g6k/2/

代码：

#container {
  overflow: auto;
  width: 250px;
  height: 250px;
}

#content {
  width: 1000px;
  height: 1000px;
}


/* Webkit */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}


/* Track */

::-webkit-scrollbar-track {
  background: #F2F2F2;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 0px;
  border-radius: 0px;
}


/* Handle */

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 0px;
  border-radius: 0px;
  background: #999999;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(205, 205, 205, 0.4);
}

<div id="container">
  <div id="content">
    test content
  </div>
</div>

如果您使用任何设备设置启用Chrome模拟，并尝试通过抓取滚动条进行滚动，则不能。

您可以使用任何网站来复制具有自定义webkit滚动条的网站，即使此示例如下： https://css-tricks.com/examples/WebKitScrollbars/

只需启用移动模拟，您就无法抓住它。

有没有人知道如何拥有Chrome上始终存在的自定义滚动条，并且仍能“抓住”它们以像原生滚动条一样滚动？

Answer 1

对于遇到这种情况的其他人：Chrome团队已经决定这不是他们会修复的东西，因为他们不喜欢自定义滚动条，而且因为他们说Android无法抓住＆＃39;滚动条一般都是按设计设计的。

所以唯一的答案就是完全停止使用自定义滚动条，因为尝试应用一个类来执行它是否是＆＃34;移动＆＃34;或不是一个非常糟糕的解决方案。

无法通过手机“抓取”自定义Chrome滚动条

1 个答案: