表のスクロールバーが表がIE

Question

問題にフォーカスを受け取ったときに跳ね上がり：私はtableがフォーカスを取得した後、スクロールバーが跳ね上がり、overflow-y : autoでdivを包んでtableをしました。どうすればこれを防ぐことができますか？

この現象は、IE9で発生し、Chromeでは発生しません。

注意：フォーカスを受け取れるように、テーブルにtabindexを追加しました。私はそれをクリックするとテーブルに焦点を合わせます。

jsFiddle：ページ上の他の要素に http://jsfiddle.net/msdevs/r6TzS/4/

1. スクロール表ダウン
2. クリックしてそのテーブルの損失焦点
3. クリックしてテーブルの上にそれ
4. スクロールバーに焦点を当てますジャンプアップ

HTML：

<div> 
     <table id="tabl" tabindex="1"> 
      <thead> 
       <tr> 
        <th style="font-weight: bold">head</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>first</td> 
       </tr> 
       <tr> 
        <td>SEC</td> 
       </tr> 
       <tr> 
        <td>dsadfawdfadfa</td> 
       </tr> 
       <tr> 
        <td>dsadfawdfadfa</td> 
       </tr> 
. 
. 
. 
       <tr> 
        <td>dsadfawdfadfa</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 

CSS：

table { 
    table-layout: fixed; 
    font-family: arial; 
    font-size: 11px; 
    text-align: left; 
    outline: none; 
    width: 625px; 
} 
div { 
    overflow-y: auto; 
    overflow-x: hidden; 
    height: 150px; 
    width: 300px 
} 

JS：

$('table').focusin(function (e) { 
    console.log("table got focus - scroller jumps up"); 
}).click(function() { 
    $('table').focus(); 
}); 

Answer 1

これは私のために修正されました - ラッパー上の現在のスクロール位置の記録を保持し、それをぼかしで再インテントします。

http://jsfiddle.net/r6TzS/10/

$('#wrapper').scroll(function(){ 
    $(this).data({posY: $(this).scrollTop()}) 
}) 
.blur(function(){ 
    $(this).scrollTop($(this).data("posY")); 
}) 

Answer 2

更新：はmouseleaveとmouseenterを追加することにより、私はscrolを取得することができましたIE9とChrome v24.0.1312.57で正しく動作するようになりました。

実施例：http://jsfiddle.net/r6TzS/9/

var scrollPos = 0; 
var ignoreScrollPos = 0; 

$('div').mouseleave(function() { 
    scrollPos = $('div').scrollTop(); 
    console.log("Scroll position set: " + scrollPos);   
    ignoreScrollPos = 0; 
}).mouseenter(function() { 
    ignoreScrollPos = 1; 
}); 

$('table').focusin(function (e) { 
    console.log("table got focus - scroller jumps up: " 
       + $('div').scrollTop()); 
}).click(function() {  
    if (!ignoreScrollPos) { 
     console.log("Set position to: " + scrollPos); 
     $('div').scrollTop(scrollPos); 
    } 
}); 

このソリューションでは、IE9に飛び上がりからスクロールバーを防ぐことができます。 ただし、Chromeで正しく動作しないことが判明しました。 それにかかわらず、私はこの解決法を共有することが有用であると思った。

Answer 3

IEでは、フォーカスを<table/>タグに視覚的に設定すると、フォーカスをタグの最初の要素に設定することで、テーブルがリセットされます。

demonstratedclick eventの最後の要素にフォーカスを明示的に設定すると、これは簡単に<table/>になります。あなたがよく見ると、クリックすると、実際にテーブルは上にスクロールし、下にスクロールします。

これは、それが行われた後、（あなたのコードの結果、これが本来の動作であることに注意してください、としない）tableにtable最初のセットfocusをクリックするの、理由は単なる行為、あなたのカスタムハンドラです定義したイベントは、td:nth-last-child(1)、つまり最後のtdにフォーカスが設定され、その結果、テーブルが下にスクロールされます。

フォーカスを設定するbuttonを追加すると、その違いがわかります。

質問のうちwhy部分のみです。あなたの実際の必要条件を知っていれば、私はよりぴったりのhow to fix答えを提供することができます。

Answer 4

あなたの代わりにDIVをテーブルの上にスクロール-yのオプションを適用しようとしています。または、 "tbody"タグを試して、あなたのTRをすべてこのタグに入れてください。これにscroll-yを適用します。これが私の知識に役立つことを願っています。 それ以外の場合は私に教えてください私はあなたに他の解決策を与えるでしょう:)

Answer 5

この質問に対する回答は実際には正確ではありません。主な問題は、Internet Explorerのfocus（）の実装です。受け入れられたJSFiddleでは、focus（）を呼び出すことはないので、元の問題は起こりません。あなたがその例からすべてのjavascriptを取り出しても、スクロールの問題はまだ発生しません。 focus（）の代わりにsetActive（）を呼び出すと、その要素をアクティブとして設定しますが、ビューにスクロールしようとはしません。 setActive（）メソッドについては、http://help.dottoro.com/ljqmdirr.phpで説明します。それはieによってのみサポートされることに注意してください。ここで

は実施例である - http://jsfiddle.net/r6TzS/100/

$('table').focusin(function (e) { 
    console.log("table got focus - scroller jumps up"); 
}).click(function() { 
    $('table').setActive(); 
});