听取浏览器Ctrl + F /查找布局修改 [英] Listening to browser Ctrl+F/find layout modifications

问题描述

在当前最简单的例子中（ http://jsfiddle.net/twPHW/ ）：

p>

 < 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内的表格将会上升（如果它的顶部更改），以向用户显示匹配的元素。

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

我知道这是不可能的听取浏览器查找 。我只是想听取这个布局修改，以防止它或相应地同步我的其余观点。我试图听滚动事件或使用Chrome Mutation Observer ，但它不起作用。任何想法？

• 关于布局修改的类似的Stackoverflow票据：


• Chromium dev上的T​​icket关于版面修改的频道跟踪器： Chromium Issue 318191
• 
  

解决方案

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

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

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

这样就不可能听到这些布局变化，因为在溢出时侦听滚动事件的唯一解决方法是：隐藏元素，是要收听鼠标滚轮事件 ...

糟糕的是，它不可能阻止用户通过浏览器查找修改布局，因为即使可以阻止Ctrl + F或F3 ，我们无法阻止用户使用编辑 - >在Firefox或IE中查找菜单

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

解决方案

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

这篇关于听取浏览器Ctrl + F /查找布局修改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！