iOS 15下设置div滚动条始终可见不生效问题咨询

需要实现**div元素（非整个页面body）**的滚动条始终可见效果，目前该效果在除iOS端Safari、Chrome外的所有环境均可正常运行，排查确认问题根源为::-webkit-scrollbar伪元素在iOS系统上不生效。
当前已使用的CSS代码如下，该代码在iOS之外的环境可正常生效：

::-webkit-scrollbar {
   width: 20px;
   background: red;
}

待解决疑问：

• 是否有可行的兼容方案实现该需求？
• iOS系统不支持该伪元素自定义滚动条的原因是什么？

这是iOS系统级的渲染限制：

1. 苹果为了保持全系统交互、视觉体验的一致性，在iOS端的WebKit内核中强制使用系统原生浮动滚动条，完全不开放::-webkit-scrollbar系列伪元素的自定义权限，没有任何原生CSS属性可以修改滚动条的默认显示逻辑——默认静止状态自动隐藏，仅滚动操作触发时临时显示。
2. iOS平台所有第三方浏览器（包括iOS端Chrome、Firefox、Edge等）根据苹果应用商店规则，都必须使用系统提供的WebKit内核渲染页面，无法使用自研内核，因此所有iOS端的浏览器都会受这个限制，和浏览器本身的品牌无关。

目前没有纯CSS的hack方案可以让iOS原生滚动条永久可见，可选方案只有两类：

• 自定义模拟滚动条（全端效果统一）
  放弃依赖原生滚动条的自定义能力，自行实现滚动条逻辑：
  1. 给目标容器设置overflow: hidden，内部嵌套内容层，监听容器的鼠标滚轮、触摸滑动事件，手动控制内容层的偏移量，可保留原生惯性滚动手感。
  2. 在容器侧边新增独立DOM作为滚动条轨道和滑块，根据内容总高度、容器可视高度、当前滚动偏移量，实时计算滑块的高度和位置，滚动条的样式、显隐逻辑完全由自己控制，可做到全端永久可见、样式完全统一。
     该方案兼容性覆盖所有平台，缺点是需要编写额外的JS逻辑处理滚动同步，要注意适配触摸滑动、惯性滚动、内容动态变化等边界场景。
• 端侧差异化降级（实现成本最低）
  如果产品允许iOS端保留系统默认交互，可做环境检测：非iOS环境继续使用原有::-webkit-scrollbar代码实现自定义常驻滚动条，iOS环境直接 fallback 到系统默认滚动条行为即可。
  环境检测可通过UA判断iOS系统，也可以通过特性检测判断当前环境是否支持::-webkit-scrollbar自定义能力，避免UA判断失效的问题。

注意：网传的各类强制iOS显示滚动条的纯CSS写法（比如设置overflow: scroll叠加伪元素、加透明边框等）均无法突破系统级限制，在当前所有iOS正式版本中都无效，不需要浪费时间尝试。

内容的提问来源于stack exchange，提问作者Shahar