移动端WebKit自定义滚动条不生效问题求助

各位大佬好！我最近在做页面自定义滚动条的需求，用了WebKit相关的CSS伪元素来设置样式，但碰到个头疼的问题——当我用开发者工具检查页面，或者把窗口缩成移动端小屏幕尺寸时，自定义的滚动条就没了，反而显示浏览器默认的样式，完全达不到预期效果。

我目前写的CSS代码如下：

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background-color: #ccc;
}

::-webkit-scrollbar-thumb {
  background-color: #ffcc35;
}

body {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

:empty {
  overflow-y: hidden;
}

有没有大佬能帮我排查下问题出在哪？或者有没有针对移动端WebKit内核浏览器的滚动条适配技巧呀？

备注：内容来源于stack exchange，提问作者Sajid Ali