在Tab中滾動不起作用

我發現如果我在div元素中放置一個table元素，並將div的屬性設置爲像width，height和overflow：auto;並在表格的td中放置一些輸入元素。比使用製表符移動並發現滾動不隨標籤移動（如果輸入元素包含一些數據）。這個問題只會在Chrome中遇到，而不會在其他現代瀏覽器中遇到。下面是示例代碼：在Tab中滾動不起作用

<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>

我也創建了一個plunker鏈接：

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

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

任何有關此幫助將不勝感激。

來源

2014-12-19 Naveen Dahiya

我使用Chrome 38在我的Mac可見的行數，一切都通過適當滾動時我標籤框。 – kinezu 2014-12-20 04:51:42

我使用的是Windows 8操作系統，它看起來像這個問題在Windows操作系統中遇到，但我沒有在Mac上試用。 – 2014-12-22 04:36:38

我在Windows 7機器上使用Chrome 38，並且工作正常。它可能是Windows 8的具體？ – Aeolingamenfel 2014-12-22 17:35:33

可能嘗試重新安裝Chrome，和/或在Safari上嘗試使用相同的代碼。也許嘗試使用鼠標，或者如果已經使用觸控板，請使用鼠標。

來源

2014-12-24 13:54:31 user2045195

在Windows 8

鉻：滾動與TABKEY不滾動，使TBODY視正確

版本39.0.2171.95版本金絲雀41.0.2257.0（64位）版本外部可見的行41.0.2236.0上 IE 11 火狐31.0

。由此我的溶液（64位）

正常工作與最新的Chrome測試& 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);

//如果需要，我可以提供JavaScript代碼來計算

來源

2014-12-30 08:25:06 user3856491

其實我不想用js滾動，它似乎是鉻問題，但我不確定它。 – 2015-04-16 08:11:10

在Tab中滾動不起作用

回答

相關問題