1

这是 jsFiddle - http://jsfiddle.net/75Rqe/8/

不幸的是，我无法将其简化为一个最小的示例，因此它包含相当多的代码。

它是我为 YUI3 数据表编写的用于实现就地编辑的 mixin 的精简版本。

首先是问题：

  1. 加载 jsFiddle
  2. 向下滚动表格，直到 dnum 为 26 的行是表格中的最后一个可见行： 在此处输入图像描述（26 没有什么特别之处，只是为了示例）
  3. 现在单击该行的 dnum 字段并将 26 更改为其他内容： 在此处输入图像描述
  4. 最后按tab键： 在此处输入图像描述

如果您使用的是 Chrome，则表格会在选项卡上自动滚动，以在表格中间显示修改后的行。

在 Firefox 或 IE9 上不会发生这样的事情： 在此处输入图像描述

我知道期望任何人分析 jsFiddle 的代码是不公平的，所以我的问题是如何解决这个问题？我试图使用 Chrome 开发工具在各种“明显”的地方放置断点 - 没有骰子。内容滚动并且没有断点被击中。

滚动事件发生时我可以中断吗？

简而言之，我非常绝望（用 windbg 调试 Chrome 已经让我恶心了）。

欢迎任何反馈。

编辑

好的，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 中）。它应该可以帮助您理解问题。在单击滚动容器中的第一个锚点后尝试 Tabbing，并尝试单击scrollIntoView直接调用的按钮

我特别喜欢 Chrome 的行为，但我认为你无能为力，除了scrollIntoView在使用命中选项卡后调用自己（并取消选项卡的默认行为e.preventDefault）

这是一个实现，其中通过链接的选项卡在选项卡时不会将项目移动到中间

于 2012-11-12T20:25:57.230 回答