Cuộn bằng tabbing không hoạt động trong Chrome

Question

Tôi đã tìm thấy rằng nếu tôi đặt một phần tử bảng bên trong phần tử div và đặt các thuộc tính của div giống như chiều rộng, chiều cao và tràn: tự động; và đặt một số phần tử đầu vào bên trong td của bảng. hơn là di chuyển với các tab và thấy rằng cuộn không di chuyển với tab (nếu các phần tử đầu vào chứa một số dữ liệu). Sự cố này chỉ gặp phải trong Chrome chứ không phải trong các trình duyệt hiện đại khác. Đây là mẫu mã:

<div style="overflow: auto; height: 100px;width:400px;"> 
     <table > 
      <tbody> 
      <tr> 
       <td style="width:100px;"><input value="1" type="text"/></td> 
       <td style="width:100px;"><input value="2" type="text"/></td> 
       <td style="width:100px;"><input value="3" type="text"/></td> 
       <td style="width:100px;"><input value="4" type="text"/></td> 
       <td style="width:100px;"><input value="5" type="text"/></td> 
       <td style="width:100px;"><input value="6" type="text"/></td> 
       <td style="width:100px;"><input value="7" type="text"/></td> 
       <td style="width:100px;"><input value="8" type="text"/></td> 
       <td style="width:100px;"><input value="9" type="text"/></td> 
      </tr> 
      </tbody> 
     </table> 

</div> 

Tôi cũng đã tạo một liên kết trên plunker:

http://plnkr.co/edit/1l8HftcoDlebywQ8LDos?p=preview

http://embed.plnkr.co/1l8HftcoDlebywQ8LDos/preview

Bất kỳ giúp đỡ về vấn đề này sẽ được đánh giá cao.

Answer 1

Có thể thử cài đặt lại Chrome và/hoặc thử cùng mã này trên Safari. Có thể thử chuột hoặc sử dụng bàn di chuột của bạn nếu đã sử dụng.

Answer 2

Trên Windows 8

Chrome: cuộn với TABKEY không di chuyển để làm cho có thể nhìn thấy một hàng bên ngoài viewport tbody đúng

Version 39.0.2171.95 Version 41.0.2257.0 chim hoàng yến (64-bit) Version 41.0.2236.0 (64-bit)

trình một cách chính xác trên IE 11 Firefox 31,0

Theo Thông tư này giải pháp của tôi thử nghiệm với Chrome mới nhất & IE11

 // rowObj is javascript <tr> element object 
     rowObj.addEventListener("focus", function(event) { 
     console.log("focus visible row=" + event.currentTarget.sectionRowIndex); 
     if(event.currentTarget.sectionRowIndex === 0) 
      detObj.scrollTop = 0;      //detObj is javascript <td> 
     else 
     if(event.currentTarget.sectionRowIndex > 4) // is the max visible rows in <tbody> 
      detObj.scrollTop = 9999;     // will focus on last row in <tbody> 
    }, true); 

// Nếu cần tôi có thể cung cấp mã javascript để tính toán số lượng hàng có thể nhìn thấy trong