2

現在の最小限の例 ( 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 (ブラウザで機能を検索) を実行し、「バー」と入力し始めると、div 内のテーブルが上に移動して (上部が変更された場合のように)、一致した要素がユーザーに表示されます。

検索機能で「バー」を探せるようにしたいのですが、そのレイアウト変更をjavascriptで処理したいです。

ブラウザの "find"をリッスンできないことはわかっています。このレイアウトの変更を聞いて、それを防ぐか、それに応じて残りのビューを同期したいだけです。スクロール イベントをリッスンしたり、Chrome Mutation Observerを使用したりしようとしましたが、うまくいきませんでした。何か案が ？

4

2 に答える 2

1

それらのレイアウト変更を聞くことはできないと思います。

scrollIntoViewブラウザーが要素を見つけると、一致した要素を呼び出すことと同じです。したがって、スクロール イベントは、コンテナ div がスクロール可能な場合にのみ発生します。

この例では、親スタイルはoverflow: hidden;です。したがって、スクロール イベントは発生しません。

この場合、これらのレイアウト変更をリッスンできなくなります。overflow:hiden 要素でスクロール イベントをリッスンする唯一の回避策は、マウス ホイール イベントをリッスンすることです ...

悪い話は、ブラウザの検索を通じてユーザーがレイアウトを変更するのを防ぐことは不可能だということです。なぜなら、たとえCtrl+F または F3Edit-> Findを防ぐことができたとしても、ユーザーが Firefox や IEのメニューを使用するのを防ぐことはできないからです。

于 2013-11-13T15:48:55.000 に答える
0

私はこれをテストしていませんが、1 つのオプションはpreventDefault()ctrl+f キーを押して、独自のバージョンの検索機能を作成することです。

于 2013-11-12T18:51:06.943 に答える