搞清楚HTML內容滾動的罪魁禍首在Chrome

這是的jsfiddle - http://jsfiddle.net/75Rqe/8/搞清楚HTML內容滾動的罪魁禍首在Chrome

不幸的是，我無法將其降低到最小的例子，所以它包含了相當多的代碼。

這是我爲YUI3 Datatable編寫的mixin的精簡版本，用於實現就地編輯。

第一問題：

裝入的jsfiddle
滾動表，直到與dnum 26行是最後一個可見行的表：（沒有什麼特別之處26，只是爲例子的緣故）
點擊此行的dnum領域，並更改26到別的東西：
最後按下tab鍵：

如果您使用的是Chrome瀏覽器，那麼表格會在選項卡上自動滾動，以便在表格中間顯示修改過的行。

沒有這樣的事情發生在Firefox或IE9： enter image description here

我明白，這是不公平的，從任何人預期分析的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'); 
});

來源

2012-11-12 mark

當標籤的元素，似乎鉻滾動元件插入的中間容器，在FF和IE中，它似乎做默認行爲scrollIntoView()，這是對齊到底部

請參閱this example（在Chrome和FF/IE中）。它應該可以幫助你理解問題。試着跳格您點擊滾動容器中的第一錨後，也試着點擊調用scrollIntoView按鈕直接

我特別喜歡Chrome的行爲，但我不認爲有什麼可以做這件事，除了要求scrollIntoView自己以後的用途打標籤（和取消與e.preventDefault標籤的缺省行爲）

這裏是一個implementation，其中通過鏈接Tab鍵不動的物品放入中間的互聯他們的時候

來源

2012-11-12 20:25:57

防止默認選項卡處理是較困難 - 你必須處理shift鍵，檢測最後一個項目是否被標出（首先是s hift標籤出來），在這種情況下應該允許默認處理。我會將你的答覆標記爲答案，除非有人有更簡單的選擇，如果有的話。 – mark

@mark我知道這比這更難，但是你並不真正期望我把自己的時間投入到爲你提出一個完美的解決方案，你呢？這對於您開始朝着正確的方向前進已經綽綽有餘了。我特別不認爲這是值得擔憂的真正問題。 –

不，我不指望。我想我應該寫下「必須處理」，這樣你就不會認爲我的意思是'你'字面意思。 – mark

搞清楚HTML內容滾動的罪魁禍首在Chrome

回答

相關問題