侦听浏览器 Ctrl+F/查找布局修改

Listening to browser Ctrl+F/find layout modifications

本文关键字：查找 布局 修改 Ctrl+F 浏览器      更新时间：2023-09-26

在当前的最小示例（http://jsfiddle.net/twPHW/）中：

<div style="overflow: hidden; height: 24px;">
<table>
<thead>
<tr>
<td style="background-color: rgb(109,173,157);">foo</td>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color: rgb(236,222,117);">bar</td>
</tr>
</tbody></table>
</div>

"foo"单元格是唯一可见的单元格。然后，如果我执行 Ctrl-F（在浏览器中查找功能），并开始键入"bar"，div 内的表格将上升（就像它的顶部是否发生变化）向用户显示匹配的元素。

我希望能够通过查找功能查找"bar"，但我想通过 javascript 处理布局修改。

我知道不可能监听浏览器"查找"。我只想听听这个布局修改，以防止它或相应地同步我的其余视图。我尝试收听滚动事件或使用Chrome突变观察器，但它不起作用。知道吗？

  • 关于布局修改的类似 Stackoverflow 票证：Chrome 和 IE 中的 Ctrl F/查找功能修改布局
  • 关于布局修改的 Chromium 开发频道跟踪器上的票证：铬问题 318191

我认为不可能听到这些布局修改。

当浏览器找到元素时，相当于为匹配的元素调用scrollIntoView。因此，仅当容器div 可滚动时，才会触发滚动事件。

在示例中，父样式为 overflow: hidden; 。因此，它不会触发任何滚动事件。

然后就不可能侦听这些布局更改，因为侦听 overflow：hiden 元素上的滚动事件的唯一解决方法是侦听鼠标滚轮事件......

不好的故事是，不可能阻止用户通过浏览器查找修改布局，因为即使可以阻止 Ctrl+F 或 F3，我们也无法阻止用户使用 Firefox 或 IE 中的Edit-> Find菜单

。

我还没有测试过这个，但一个选项是在ctrl + f按键上preventDefault()，然后制作自己的查找功能版本。

相关文章：