可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Can someone please explain why the following does not work in IE8. Basically i'm just trying to scroll a Table Row into view contained within an overflow DIV. Code:

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

Well it seems ScrollIntoView doesn't work for Table Row elements. If I change to use a Column selector instead it works fine.

<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
 });

回答1:

Little late for an answer, but I recently ran into a similar issue with IE8 and I thought I'd share this to help others with a similar problem. The project I was working on was trying to avoid using the jQuery library, so here is a non-jQuery solution.

Basically I implemented a workaround by setting the scrollTop property with the value that I need to get it to scroll to the relevant row. The value had to be calculated. This solution was targeted towards the vertical scrolling problem.

Code is detailed below. Note that the auxiliary function BrowserIsIE8() can be easily found through a WWW search.

Figure 1: Main Calling Code

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

Figure 2: Supporting Functions

// 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;
}

回答2:

It has got nothing to do with javascript nor jquery. It's an IE bug!

You can easily test this but simply trying to enter in browser's url the hash of one of your tr.

Suppose you save the code in your question (you can remove JS, it's not a JS issue) in a file called page.html.

Try then to go to such page entering this url page.html#tr3

You will see that all browsers will scroll to the specified table row, but IE won't (tested IE7 and IE8).

A possible workaround is to place the id in the 1st TD cell of each row (that's why using column selector it works as you said in you question).

Just another Microsoft trigger's tree! (Funny they just said they will come out with W8, they would do better fixing all the crap that comes out in the useless browser they provide).