javascript - 找出 Chrome 中 HTML 内容滚动的罪魁祸首

Question

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

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

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

首先是问题:

1. 加载 jsFiddle
2. 向下滚动表格，直到 dnum 26 的行成为表格中最后一个可见行: (26 没有什么特别的，只是为了举例)
3. 现在单击该行的 dnum 字段并将 26 更改为其他值:
4. 最后按 Tab 键:

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

在 Firefox 或 IE9 上不会发生这种情况:

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

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

简而言之，我非常绝望(用windbg调试Chrome已经在我的病态想法中出现了)。

欢迎任何反馈。

编辑

好的，所以坚持一些代码，所以这里是:

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');
});

Answer 1

当您使用 Tab 键切换到某个元素时，chrome 似乎会将元素滚动到容器的中间，就像在 FF 和 IE 中一样，它似乎执行 scrollIntoView() 的默认行为，即将其与底部对齐

参见this example (在 Chrome 和 FF/IE 中)。它应该可以帮助您理解问题。单击滚动容器中的第一个 anchor 后尝试按 Tab 键，并尝试单击直接调用 scrollIntoView 的按钮

我特别喜欢Chrome的行为，但我认为除了在使用hits选项卡后自己调用scrollIntoView(并使用e取消选项卡的默认行为)之外，您对此无能为力.preventDefault)

这是一个implementation使用 Tab 键浏览链接时，不会将项目移动到中间