css设置滚动条样式在IOS上无效

Question

给滚动条设置了样式，在安卓机上显示正常，但是ios无法正常显示，仍然显示的是原生的滚动条。
代码如下

/* 外层包裹盒子 */
.db_box {
  height: 25vw;
  display: flex;
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.db_box::-webkit-scrollbar {
  background-color: #ffffff;
  height: 3px;
}
.db_box::-webkit-scrollbar-track {
  background-color: #bcbcbc4a;
  margin: 0 40vw;
  border-radius: 15px;
}
.db_box::-webkit-scrollbar-thumb{
  background-color: #bcbcbc;
  border-radius: 15px;
}

也写过如下的尝试，但是仍然无效

/* 外层包裹盒子 */
.db_box {
  height: 25vw;
  display: flex;
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: auto;
}
.db_box::-webkit-scrollbar {
  background-color: #ffffff;
  height: 3px;
  border: 4px solid transparent;
  background-clip: content-box;
}
.db_box::-webkit-scrollbar-track {
  background-color: #bcbcbc4a;
  margin: 0 40vw;
  border-radius: 15px;
}
.db_box::-webkit-scrollbar-thumb{
  background-color: #bcbcbc;
  border-radius: 15px;
}

已经是我在网络上能找到的全部的解决方案了，全部是无效的，想请问有什么解决办法吗

Answer 1

支持的不一样，你可以试试自己写一个滚动条，这样就不会出现不兼容的问题了

Answer 2

这个是想过的，主要是不会...自己写的话滚动条的定位要怎么做到呢

Answer 3

1.首先滚动条的宽度，你要设置得跟内容区域一样
2.活的滚动条的宽度之后，你就可以写一个可以移动的div，这个div的宽度最好是滚动条宽度的五分之一左右
3.这个div通过绝对定位，定在滚动条区域内，一个滚动条区域减去这个div的宽度，就是相当于你滚动的进度
4.刚开始div的left设置成0
5.监听滚动的进度，通过change事件监听，他会给你返回当前可滚动的最大区域和滚动到的位置，你滚动的位置除掉最大区域，用这个值在乘以可滚动的宽度
然后可以实现这个效果

Answer 4

有帮助请点个采纳哟！