0

目に見えない要素に焦点を合わせるときに問題があります。マークアップ:

<div id="outer">
    <div id="inner" style="top: 0;">
        <div class="group" style="background: red;"><a href="#">X</a></div>
        <div class="group" style="background: blue;"><a href="#">Y</a></div>
        <div class="group" style="background: green;"><a href="#">Z</a></div>
    </div>
</div>

<button onclick="document.getElementById('inner').style.top = '-182px';">Down</button>

そしてCSS：

#outer {
    width: 300px;
    height: 182px;
    overflow: hidden;
    background: black;
}
#inner { position: relative; }
.group { width: 300px; height: 182px; background: red;}

「下」ボタンを押すと、内側のスタイルが「上：-182px」になり、機能的には別のアイテムのグループが表示されます。また、コンポーネントは基本的に垂直グループ スライダーとして機能します。「Tab」を使用するまで、すべてが完全に機能します。スライダーが次のグループ ブラウザーを表示する直前に、属性を変更せずに内部 div を自動的にシフトします。

DOM または他の場所からブラウザーによって行われたオフセットを取得するための変更はありますか? フォーカス時のスクロールはデフォルトのブラウザー機能であることを知っているので、ブラウザーと戦うつもりはなく、そのようなスクロールを無効にすることはできないと確信しています。

js コードが実行される前にブラウザーがスクロールすることがわかりました。ブラウザの前にフォーカスイベントとスクロールをインターセプトする方法はありますか?

4

2 に答える 2

0

もう少し JS を使用しないのはなぜですか? JSfiddle を生の JS を使用するようにフォークしましたが、jQuery を使用してよりクリーンにします。

http://jsfiddle.net/bldoron/wMXpt/4/

基本的に、CSS ルールを使用して暗黙的にではなく、要素をトラバースし、無関係なものを明示的に非表示にします。

最後のノードを通過したかどうかを確認する必要がありますが、全体像がわかります。

于 2012-08-31T15:08:40.803 に答える
0

これを見てください: http://jsfiddle.net/byTLg/8/。できます！Fiddle は私よりもはるかに多くのことを説明します)

于 2012-08-31T16:38:41.320 に答える