如何标记浏览器滚动条？答案

【问题标题】：How to mark browser scroll bar?如何标记浏览器滚动条？
【发布时间】：2019-06-21 12:27:43
【问题描述】：

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

我试过了

放置固定css位置的div
为滚动条轨道创建线性渐变样式

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

【问题讨论】：

滚动条是浏览器用户界面的一部分，你不能在你的网页上用它做任何事情
您可以完全删除滚动条，使用 css，并实现自己的
让我明白这里的目的。页面查找功能是现有功能，因此您可能不想重新发明轮子，对吗
我可能会将标记压缩成点（或者可能是带有圆形末端的破折号）并使用固定定位将它们放在滚动条旁边。少了很多麻烦，但仍然是一个可用的用户体验。

标签： javascript html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您可以尝试创建一个 div 并为其指定窗口的确切大小，从而隐藏默认滚动条。在第二个div中添加一个带有滚动条的div（使用CSS溢出）和另一个带有绝对位置或类似位置的div，这个带有绝对位置和z-index的div应该位于滚动条的顶部（您添加的div）并且有大小相同。当用户与页面交互时，您可以使用您希望用户在滚动条顶部看到的任何内容填充绝对位置 div。通过 CSS，您可以设置颜色、不透明度等。使用 js，您可以将搜索自定义 id 添加到找到的单词中，获取它们在页面中的位置并计算您希望在滚动条顶部看到的那些条的位置。

【讨论】：