테이블 행에 대한 ScrollIntoView가 IE 8에서 작동하지 않음

누군가 IE8에서 다음 코드가 작동하지 않는 이유를 설명해주십시오. 기본적으로 나는 오버 플로우 DIV에 포함 된 뷰로 테이블 행을 스크롤하려고합니다. 코드 :테이블 행에 대한 ScrollIntoView가 IE 8에서 작동하지 않음

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<script language="javascript" src='scripts/jquery-1.3.2.js'></script> 
<script language="javascript" src='scripts/jquery.scrollTo-1.4.2.js'></script>  
<stylesheet type="text/css"> 
    table {border-collapse: collapse;} 
    th, td {margin: 0; padding: 0.25em 0.5em;} 

    html, body 
    { 
     height: 100%; 
     width:100%; 
     overflow:hidden; 
    } 

    body 
    { 
     height:100%; 
     overflow:hidden; 
    } 

    #scrollpanel 
    { 
     height:100px; 
     overflow-x:hidden; 
     overflow-y:scroll; 
     width:200px 
    } 

</style> 
    <script> 
    $(document).ready(function() 
    {  
     var scrollToDiv = document.getElementById("scrollToDiv"); 
     scrollToDiv.scrollIntoView(true); // Works 

     var scrollToRow = document.getElementById('scrollToRow'); 
     scrollToRow.scrollIntoView(true); // Wont Work in IE8 

     //$.scrollTo("#scrollToRow"); // Using JQuery Scroll To Lib doesn't work 
     //location.hash = 'scrollToAnchor'; // this work 
    }); 

</script 
</head> 
<body> 
    <div id="scrollpanel"> 
    <div>...</div> 
    <div>...</div> 
    <div>...</div> 
    <div>...</div> 
    <div>...</div> 
    <div>...</div> 
    <div>...</div> 
    <div>...</div> 
    <div id="scrollToDiv">Scroll Here</div> 
</div> 
<br> 
<div id="scrollpanel"> 
    <table id="tblRI"/> 
     <tbody id="tbody1"> 
      <tr id="tr1"> 
       <td>Data</td> 
       <td>Data</td> 
      </tr> 
      <tr id="tr2"> 
       <td>Data</td> 
       <td>Data</td> 
      </tr> 
      <tr id="tr3"> 
       <td>Data</td> 
       <td>Data</td> 
      </tr> 
      <tr id="tr4"> 
       <td>Data</td> 
       <td>Data</td> 
      </tr> 
      <tr id="scrollToRow"> 
       <td><A NAME="scrollToAnchor">ScrollHere</A></td> 
       <td>Data 02-02</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
    <body> 
</html>

음이 ScrollIntoView 표 행 요소 작동하지 않는 것 같다. 열 선택기를 대신 사용하도록 변경하면 잘 작동합니다.

<tr id="scrollToRow"> 
    <td id="tdScrollToColumn"><A NAME="scrollToAnchor">ScrollHere</A></td> 
    <td>Data 02-02</td> 
</tr> 

$(document).ready(function() 
{  
    var scrollToDiv = document.getElementById("scrollToDiv"); 
    scrollToDiv.scrollIntoView(true); // Works 

    var scrollToRow = document.getElementById('scrollToColumn'); 
    scrollToRow.scrollIntoView(true); // Works in IE8 

    //$.scrollTo("#scrollToRow"); // Using JQuery Scroll To Lib doesn't work 
    //location.hash = 'scrollToAnchor'; // this work 
});

출처

2010-03-04 Lukie

javascript 나 jquery와는 아무런 관련이 없습니다. IE 버그입니다!

쉽게 테스트 할 수 있지만 단순히 브라우저의 url에 해시 중 하나의 해쉬를 입력하려고합니다.

page.html이라는 파일에 질문에 코드를 저장한다고 가정합니다 (JS는 제거 할 수 있지만 JS 문제는 아님).

하면이 URL을 page.html#tr3

당신은 모든 브라우저가 지정된 테이블 행으로 스크롤 것을 확인할 수 입력과 같은 페이지로 이동 한 후 시도하지만, IE는 (IE7과 IE8 테스트)하지 않습니다.

가능한 해결 방법은 id를 각 행의 첫 번째 TD 셀에 배치하는 것입니다 (그 이유는 질문에서 말한 것처럼 작동하는 열 선택기를 사용하는 것입니다).

다른 Microsoft 트리거 트리! (재미 있은 그들은 다만 W8로 나올 것이라는 점을 말했다, 쓸모없는 브라우저에서 나오는 모든 쓰레기를 고치는 더 나은 할 것이다).

출처

2011-05-26 13:04:51

조금 늦었지만 IE8과 비슷한 문제가 발생했습니다. 비슷한 문제로 다른 사람들을 돕기 위해이 문제를 공유하고 싶습니다. 내가 작업하고 있던 프로젝트는 jQuery 라이브러리를 사용하지 않으려 고했기 때문에 비 jQuery 솔루션을 사용한다.

기본적으로 scrollTop 속성을 관련 행으로 스크롤하는 데 필요한 값으로 설정하여 해결 방법을 구현했습니다. 값을 계산해야했습니다. 이 솔루션은 수직 스크롤링 문제를 타깃으로했습니다.

코드는 아래에 자세히 설명되어 있습니다. 보조 기능 BrowserIsIE8()은 WWW 검색을 통해 쉽게 찾을 수 있습니다.

그림 1 : 기본 호출 코드

var direction = determineRowScrollDirection(parentPane, row); 
scrollRowIntoView(parentPane, row, direction);

그림 2 : 지원 기능

// Determines the direction to scroll to bring the row into view. 
function determineRowScrollDirection(parentPane, row) 
{ 
    var parentTop = parentPane.scrollTop; 
    var parentBottom = parentTop + parentPane.clientHeight; 

    var childTop = row.offsetTop; 
    var childBottom = childTop + row.clientHeight; 

    var direction = 0; // Row is already in view, no scrolling required. 

    if (parentTop > childTop) 
    { 
    direction = -1; // Require scrolling up. 
    } 
    else if (parentBottom < childBottom) 
    { 
    direction = 1; // Require scrolling down. 
    } 

    return direction; 
}  

// Scroll the pane in the relevant direction to bring the row into view 
function scrollRowIntoView(parentPane, row, direction) 
{ 
    var distance = 0; 

    if (BrowserIsIE8() && direction != 0) 
    { 
    // scrollIntoView() is broken under ie8 so we need to do it this way. 
    distance = calculateScrollTopDistance(row, direction); 
    parentPane.scrollTop = distance; 
    } 
    else 
    { 
    // If scroll in top direction ... 
    if (direction == -1) 
    { 
     row.scrollIntoView(true); 
    } 
    else if (direction == 1) // Scroll in bottom direction. 
    { 
     row.scrollIntoView(false); 
    } 
    } 
}  

// Calculates the distance required to bring a row into view. 
function calculateScrollTopDistance(parentPane, row, direction) 
{ 
    var distance = 0; 
    if (direction === -1) // upwards scroll 
    { 
    distance = row.offsetTop; 
    } 
    else if (direction === 1) // downwards scroll 
    { 
    var paddingLength = parentPane.clientHeight - row.clientHeight; 
    distance = row.offsetTop - paddingLength;  
    } 

    return distance; 
}

출처

2013-09-18 07:52:38

테이블 행에 대한 ScrollIntoView가 IE 8에서 작동하지 않음

답변

관련 문제