IEでのキーボード操作によって引き起こされる不要なスクロールを避けますか？

自分自身よりも広いコンテンツを含む< div>というHTMLページがあります。過剰はスタイル "オーバーフロー：隠された;"で目に見えなくなります。IEでのキーボード操作によって引き起こされる不要なスクロールを避けますか？

このコンテンツにはリンクがあります。 IE8では（Firefox 3.6ではなく）、キーボード（タブキー）を使用して右端でクリップされるリンクにフォーカスを設定すると、IE全体が表示されるようにdiv全体をスクロールします。（divが既に左にスクロールされている場合は、同じことがフォーカスを取得したときに左のリンクでも起こります。コンテンツを右にスクロールしてリンク全体を表示させます）。

この望ましくないスクロールdivにscrollLeft値を設定することで、jQueryがうまくいかなくなったときにこれを簡単に行うことができます。しかし、私は、可能であれば、最初にスクロールするのを防ぐためにスタイルや設定を使用することをお勧めします。前述したように、Firefoxは、フォーカスを取得すると、部分的にクリップされたリンクを表示にスクロールしません。理想的には、IEは同じように動作するようにする必要があります。

下記のサンプルHTML。 IEでは、タブ（またはShift + Tab）を使用して各リンクに順番にフォーカスを設定して、ボックスの内容を横にシフトします。任意の洞察力を事前に

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Demo of undesired scrolling</title> 
</head> 
<body> 
    <a href="http://www.w3.org">Before</a> 
    <div style="width: 400px; border: 1px solid gray; overflow: hidden;"> 
     <div> 
      <div style="width: 450px; text-align: center;"> 
       <a href="http://www.w3.org">Somewhere in the middle</a> 
      </div> 
      <div style="width: 450px; text-align: left;"> 
       <a href="http://www.w3.org">Over on the left</a> 
      </div> 
      <div style="width: 450px; text-align: right;"> 
       <a href="http://www.w3.org">Over on the right</a> 
      </div> 
     </div> 
    </div> 
    <a href="http://www.w3.org">After</a> 
</body> 
</html>

ありがとう！

出典

2011-01-11 Paul

これは[私が今質問した質問]（http://stackoverflow.com/q/13827409/925897）と非常によく似ています。 – brentonstrine

含まれているdivのすべてにフィットするだけではありませんか？

私は...この置き換え方法問題スクロールを固定：あなたの例では16行目のため

 <div style="width: 400px; text-align: right;">

を。

それは役に立ちますか？

出典

2011-01-13 02:18:50 SamStar

あなたの答えをありがとう！確かに、あなたの提案はこの例を修正するだろうが、これは私が見ている問題を説明するためのサンプルに過ぎない（私のページではなく、ブラウザに本当に問題があることを自分自身に証明する）。問題の実際のページには、2つのフルページのコンテンツが並んでいます。一方はjQueryアニメーション、もう一方はスムーズに遷移します。また、エッジに部分的に表示され、ホバーやフォーカスの完全な表示になるリンクもあります。 Firefoxでうまく動作しますが、上記のようにIEはうまくスクロールしません。それを止める方法はありますか？ – Paul

私はCSSの知っているものを使ってみましたが、できませんでした...しかし、私はおそらくあなたが経験したほどではありません...私はHTMLとCSSしか知りません。私は何ができるか見ることに興味があります。 – SamStar

私はちょうど1分前に浮動小数点数を試しました。私は位置決め、z-インデックス、そしてdivを再加工して実験しました...何も動作していないようです... – SamStar

私はスクロールを防ぐために、任意の「自然な」方法はないと思うが、あなたはJSを使用して、いくつかのオプションがあります：リンクがあるかどうかを確認するために

オプション＃1

チェックonfocusイベントの視野外です。
視野が外れている場合は、単にぼかしておくか、次の有効なリンクを見つけてそのフォーカスを合わせることが好ましいでしょう。デモ：http://jsfiddle.net/cwolves/eHTVV/2/
リンクが部分的に表示されている場合、これは選択できないため変な動作をします。

オプション＃2

jQueryを使ってスクロール以外のすべての状況でのコンテナのdivのonscrollイベントでスクロール位置をリセットします。
あなたは例えば、jqueryのアニメーションイベントで正しいスクロール位置を持つ変数を格納する必要があります。
```
var correctXOffset = 0; 
myDiv.animate({ left: 500 }, function(){ 
    correctXOffset = this.offsetLeft; 
}); 
```
デモ：ビューの外
すべてのリンクがまだ選択できますしかし、あなたはそれらを見ることができませんが、これはおそらく他のブラウザがおそらくどのように行動するのかと思います。

オプション＃3

例えば、あなたのdivをスクロール行われるたびにタブインデックス順序から見えないリンクを削除します。

myDiv.animate({ left : 500 }, function(){ 
    $('.invisiblePage a').prop('tabIndex', -1); 
    $('.visiblePage a' ).removeProp('tabIndex'); 
});

オプション＃1のようにリンクは選択不可になります。

オプション＃4

"クリップ" CSSを使用したコンテンツ：clip : rect(0px 400px 400px 0px);
コンテナ必見を配置することが絶対的に
多少複雑JSは、このプロパティ
デモ：http://jsfiddle.net/cwolves/eHTVV/5/

出典

2011-06-10 03:32:04

IEでのキーボード操作によって引き起こされる不要なスクロールを避けますか？

答えて

関連する問題