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

Question

In the current minimal example ( 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>

The "foo" cell is the only one visible. Then if I do Ctrl-F (find feature in browser), and start typing "bar", the table inside the div will goes up (like if its top changes) to show to the user the matched element.

I want to be able to look for "bar" through find feature, but I want to handle that layout modification through javascript.

I know it is not possible to listen for browser "find" . I just would like to listen to this layout modification in order to prevent it or synchronize the rest of my view accordingly. I tried to listen to scroll events or to use Chrome Mutation Observer but it did not work. Any idea ?

• Similar Stackoverflow ticket about layout modifications : Ctrl F/Find feature in Chrome and IE modifies layout
• Ticket on Chromium dev channel tracker regarding the layout modification : Chromium Issue 318191

Answer 1

我尚未对此进行测试，但是一个选择是preventDefault() ctrl + f按键上的preventDefault() ，然后制作自己的查找功能版本。

Answer 2

I don't think it is possible to listen to those layout modifications.

When the browser find an element, it is equivalent to call scrollIntoView for the matched element. Thus a scroll event will be fired only if the container div is scrollable.

In the example, the parent style is overflow: hidden; . Thus it does not trigger any scroll event.

It becomes then impossible to listen to these layout change, because the only workaround that exist to listen to scroll event on overflow:hiden element, is to listen to mouse wheel event ...

The bad story is that it is then impossible to prevent user from modifying layout through the browser find, because even if one can prevent Ctrl+F or F3 , we can't prevent user from using the Edit-> Find menu in Firefox or IE