2014-12-19 2 views
7

div 요소 내에 표 요소를 배치하고 div 속성을 너비, 높이 및 오버플로와 같이 설정하면 자동으로 나타납니다. 테이블의 td 안에 일부 입력 요소를 배치하십시오. 탭으로 이동하는 것보다 스크롤이 탭으로 이동하지 않는다는 것을 알았습니다 (입력 요소에 데이터가 포함되어있는 경우). 이 문제는 다른 현대 브라우저가 아닌 Chrome에서만 발생합니다.크롬에서 탭이 스크롤되지 않는 상태에서 스크롤

<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

이에 관한 어떤 도움이 높게 평가 될 것이다 다음은 샘플 코드입니다.

+0

내 Mac에서 크롬 38을 사용하고 있습니다에 표시 행의 수를 계산하는 자바 스크립트 코드를 제공 할 수 있습니다 필요한 모든 것을는을 통해 제대로 때 탭을 스크롤하는 경우 상자. – kinezu

+0

나는 windows-8 OS를 사용하고 있는데이 문제는 Windows OS에서만 발생하지만 Mac에서는이 문제를 해결하지 못했습니다. –

+0

Windows 7 컴퓨터에서 Chrome 38을 사용하고 있습니다. 정상적으로 작동합니다. 그것은 윈도우 8 특정 수 있습니다? – Aeolingamenfel

답변

0

가능성이있는 Chrome을 다시 설치하거나 Safari에서이 코드를 사용해보세요. 어쩌면 마우스를 사용하거나 이미 트랙 패드를 사용하고 있다면 트랙 패드를 사용하십시오.

윈도우 8에

1

크롬 : 스크롤 TABKEY으로 TBODY 뷰포트 제대로

버전 39.0.2171.95 버전 41.0.2257.0 카나리아 (64 비트) 버전 밖에 볼 수 행을 스크롤하지 않습니다 41.0.2236.0 IE 11 파이어 폭스 31.0

이것과 내 솔루션에

올바르게 작동 (64 비트) 최신 크롬에서 테스트 & 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); 

// 내가

+0

실제로 스크롤하려면 js를 사용하고 싶지 않습니다. 크롬 문제인 것처럼 보이지만 확실하지 않습니다. –

관련 문제