如何标记浏览器滚动条？

Question

我想像 Chrome 中的 Control + F 那样仅使用 html css 和 js 来标记浏览器滚动条。

我努力了

1. 将div固定在css位置
2. 创建滚动条轨道的线性渐变样式

但我在两次尝试中都迷失了方向。有任何想法吗？

Answer 1

浏览器不提供允许嵌入网页中的 JavaScript 来执行此操作的 API。

最接近的方法是在元素overflow: hidden上进行设置html，然后从头开始构建自己的滚动条。您需要考虑所有会导致页面滚动的正常 UI 交互（例如搜索到特定点、按空格键或向下箭头、与屏幕阅读器交互等），因此不太可能您可以在不引入严重的可访问性和用户体验问题的情况下实现这一目标。