1

これはjsFiddleです-http : //jsfiddle.net/75Rqe/8/

残念ながら、最小限の例にまとめることができなかったため、かなり多くのコードが含まれています。

これは、インプレース編集を実装するためにYUI3Datatable用に作成したミックスインの簡略版です。

最初の問題：

  1. jsFiddleをロードします
  2. dnum 26の行がテーブルの最後に表示される行になるまで、テーブルを下にスクロールします ここに画像の説明を入力してください（例のために、26について特別なことは何もありません）。
  3. 次に、この行のdnumフィールドをクリックして、26を別のものに変更します。 ここに画像の説明を入力してください
  4. 最後にTabキーを押します。 ここに画像の説明を入力してください

Chromeを使用している場合、テーブルはタブ上で自動スクロールされ、テーブルの真ん中に変更された行が表示されます。

FirefoxやIE9ではそのようなことは起こりません。 ここに画像の説明を入力してください

jsFiddleのコードを分析することを誰かに期待するのは不公平だと理解しているので、私の質問は、この問題をどのようにトラブルシューティングできるかということです。Chrome開発ツールを使用して、さまざまな「明らかな」場所にブレークポイントを配置しようとしていました。サイコロはありません。コンテンツはスクロールし、ブレークポイントはヒットしません。

スクロールイベントが発生したときに中断できますか？

要するに、私はかなり必死です（windbgでChromeをデバッグすることはすでに私の病気の心を越えました）。

フィードバックは大歓迎です。

編集

OK、SOはいくつかのコードを主張しているので、ここにあります：

YUI.add('dt-inplace-edit',
  function (Y) {
    "use strict";
    ...

    function DataTableInplaceEdit() {
    }

    DataTableInplaceEdit.prototype = {
    ...
    };

    Y.DataTable.InplaceEdit = DataTableInplaceEdit;
  }, '0.1', {requires: ['node']});


YUI({filter: 'raw', debug: true, combine: false}).use("datatable", "node", 'datatable-scroll',
  'dt-inplace-edit',
    function(Y) {
    var i, table, data =[
       {dnum:100, dint:1, dtxt:"Test 1 string", dname:"George"},
       {dnum:101, dint:2, dtxt:"Test 2 string", dname:"Paul"},
       {dnum:102, dint:3, dtxt:"Test 3 string", dname:"Chase"},
       {dnum:103, dint:4, dtxt:"Test 4 string", dname:"Marge"},
       {dnum:104, dint:5, dtxt:"Test 5 string", dname:"Ben"},
       {dnum:105, dint:6, dtxt:"Test 6 string", dname:"Skyler"},
       {dnum:106, dint:7, dtxt:"Test 7 string", dname:"Lara"},
       {dnum:107, dint:1, dtxt:"Test 1 string", dname:"George"},
       {dnum:108, dint:2, dtxt:"Test 2 string", dname:"Paul"},
       {dnum:109, dint:3, dtxt:"Test 3 string", dname:"Chase"},
       {dnum:110, dint:4, dtxt:"Test 4 string", dname:"Marge"},
       {dnum:111, dint:5, dtxt:"Test 5 string", dname:"Ben"},
       {dnum:112, dint:6, dtxt:"Test 6 string", dname:"Skyler"},
       {dnum:113, dint:7, dtxt:"Test 7 string", dname:"Lara"}
    ];

    Y.Base.mix(Y.DataTable, [Y.DataTable.InplaceEdit]);

    data = data.concat(data.concat(data));
    for (i = 0; i < data.length; i += 1) {
        data[i] = Y.merge(data[i]);
        data[i].dnum = i;
    }

    Y.one('body').addClass("yui3-skin-sam");               
    table = new Y.DataTable({
        columns:[ 'dnum', 'dint', 'dtxt', 'dname' ],
        data: data,
        height: '15em',
        width: '100%',
        scrollable: 'y',
    }).render('#dt');
});
4

1 に答える 1

1

要素にタブで移動すると、chromeが要素をコンテナの中央にスクロールするように見えますが、FFやIEの場合と同様に、デフォルトの動作である、要素をscrollIntoView()下部に配置するように見えます。

この例を参照してください（ChromeおよびFF / IEの場合）。問題を理解するのに役立つはずです。スクロールコンテナの最初のアンカーをクリックした後でタブを押してみてください。また、scrollIntoView直接呼び出すボタンをクリックしてみてください。

scrollIntoView私は特にChromeの動作を好みますが、ヒットタブを使用した後に自分自身を呼び出す（そしてタブのデフォルトの動作をでキャンセルするe.preventDefault）以外に、Chromeについてできることはあまりないと思います。

これは、リンクをタブで移動しても、アイテムをタブで移動するときにアイテムが中央に移動しない実装です。

于 2012-11-12T20:25:57.230 に答える