Webkit 滚动条响应鼠标但不响应触摸？

Question

我很困惑为什么 webkit 滚动条在鼠标上工作得很好，但在触摸事件上却完全不起作用。有 Chrome 经验。

我有一个div“容器”，带有overflow-y：auto。当滚动条出现时，我可以用鼠标单击滚动条拇指并上下滚动就可以了。但是，当我使用触摸尝试移动它时，什么也没有发生。我尝试过调整滚动条拇指的大小，设置 touch-action: pan-y;，更改 div 的内容/样式，但没有任何效果。我在网上找不到其他遇到类似问题的内容。查看 MDN 文档 touch 是为滚动条实现的并且应该可以工作。不确定是什么导致了这种不一致。

.container {
height: 5rem;
overflow-y: auto;

}
::-webkit-scrollbar{
  width: 1.25rem;
}
::-webkit-scrollbar-track{
  background: red;
}
::-webkit-scrollbar-thumb{
  width:1.25rem;
}

<div class="container">
   <ul>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
       <li>item</li>
    </ul>
</div>

Answer 1

并非所有浏览器都支持非标准元素，请使用scrollbar-width。

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar