7

問題:tableでラッピングdivを行ってoverflow-y : autoいtableます。フォーカスを取得すると、スクロール バーがジャンプします。どうすればこれを防ぐことができますか?

Chrome ではなくIE9でこの動作が発生します。

注: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();
});
4

5 に答える 5

7

これで修正されました-ラッパーの現在のスクロール位置の記録を保持し、ぼかしでそれを元に戻します。

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

$('#wrapper').scroll(function(){
    $(this).data( {posY: $(this).scrollTop()} )
})
.blur(function(){
    $(this).scrollTop( $(this).data("posY") );
})
于 2013-02-22T16:05:41.700 に答える
2

この質問に対する受け入れられた回答は、実際には正確ではありません。主な問題は、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();
});
于 2015-10-12T20:30:02.717 に答える
1

更新:追加することで、IE9mouseleaveとmouseenterChrome 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 では正しく動作しないことがわかりました。とにかく、このソリューションを共有することは役立つと思いました.

于 2013-02-22T15:20:26.137 に答える
0

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

これは、 of内の最後の要素にフォーカスを明示的に設定することで簡単に実証できます。よく見ると、クリックすると、テーブルが実際に一番上にスクロールし、次に非常に速く下にスクロールします。click event<table/>

これは、table最初の をクリックするだけで が に設定focusされるためtableです (これは固有の動作であり、コードの結果ではないことに注意してください)。これが完了すると、定義したカスタム ハンドラーがイベントを受け取り、つまり、td:nth-last-child(1)最後tdにフォーカスを設定するため、テーブルを一番下までスクロールします。

フォーカスを設定する を追加するbuttonと、違いに気付くでしょう。

whyそれはあなたの質問のほんの一部です！how to fixあなたの実際の要件を知っていれば、より適切な回答を提供できます。

于 2013-02-22T15:54:46.503 に答える
0

DIV の代わりにテーブルに scroll-y オプションを適用しようとしましたか。または、「tbody」タグを試して、すべての TR をこれに入れることもできます。そして、これに scroll-y を適用します。これが私の知る限りうまくいくことを願っています。それがうまくいくかどうか教えてください。それ以外の場合は、別の解決策を提供します:)

于 2013-02-23T03:59:53.843 に答える