如何标记浏览器滚动条？

Question

我想用html css和js标记浏览器滚动条，就像chrome在Control + F中一样。

我尝试过

1. 在css位置固定的情况下放置div
2. 创建线性渐变样式以滚动条轨迹

但是我在两次尝试中都迷路了。有什么想法吗？

Answer 1

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

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

Answer 2

您可以尝试制作一个div并为其指定窗口的确切大小，然后隐藏默认滚动条。在div秒内添加一个带有滚动条的div（使用CSS溢出）和另一个具有绝对位置或类似名称的div，此绝对位置和z-index位置的div应该位于滚动条（您添加的div）的顶部一样的大小。当用户与页面互动时，您可以使用您希望用户在滚动条顶部看到的任何内容填充绝对位置div。在CSS中，您可以设置颜色，不透明度等。使用js，您可以在搜索到的单词上添加搜索自定义ID，获取它们在页面中的位置，并计算要在滚动条顶部看到的那些条的位置。