Question

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

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

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

首先是问题：

加载jsFiddle
向下滚动表格，直到带有dnum 26的行是表格中最后一个可见行：（仅仅为了示例，26没有什么特别的）
现在单击此行的dnum字段并将26更改为其他内容：
最后按Tab键：

如果您使用的是Chrome，则表格会自动滚动到标签上，以便在表格中间显示已修改的行。

Firefox或IE9上没有这样的事情发生： enter image description here

我理解任何人都希望分析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');
});

Answer 1

当你选择一个元素时，似乎chrome将元素滚动到容器的中间，在FF和IE中，它似乎执行scrollIntoView()的默认行为，即对齐它到底部

请参阅this example（在Chrome和FF / IE中）。它应该可以帮助您理解问题。单击滚动容器中的第一个锚点后尝试跳转，并尝试单击直接调用scrollIntoView的按钮

我特别喜欢Chrome的行为，但我不认为你可以做很多事情，除了在使用点击标签后自己调用scrollIntoView（并使用e.preventDefault取消标签的默认行为）< / p>

这是一个implementation，其中通过链接进行选项卡时不会将项目移动到中间

弄清楚Chrome中HTML内容滚动的罪魁祸首

1 个答案: