表格行的 ScrollIntoView 在 IE 8 中不起作用答案

【问题标题】：ScrollIntoView For Table Row Not Working in IE 8表格行的 ScrollIntoView 在 IE 8 中不起作用
【发布时间】：2010-03-04 07:12:30
【问题描述】：

谁能解释一下为什么以下在 IE8 中不起作用。基本上我只是想将表格行滚动到溢出 DIV 中包含的视图中。代码：

<!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 不适用于 Table Row 元素。如果我改为使用列选择器，它可以正常工作。

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

【问题讨论】：

标签： javascript jquery html internet-explorer

【解决方案1】：

回答有点晚了，但我最近遇到了与 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;
}

【讨论】：

【解决方案2】：

它与 javascript 或 jquery 无关。 这是一个 IE 错误！

您可以轻松地对此进行测试，但只需尝试在浏览器的 url 中输入您的 tr 的哈希值。

假设您将问题中的代码（您可以删除 JS，这不是 JS 问题）保存在一个名为 page.html 的文件中。

然后尝试进入该页面输入此网址page.html#tr3

您会看到所有浏览器都会滚动到指定的表格行，但 IE 不会（已测试 IE7 和 IE8）。

一种可能的解决方法是将 id 放置在每行的第一个 TD 单元格中（这就是为什么使用列选择器可以按照您在问题中所说的那样工作）。

只是另一个 Microsoft 触发器的树！ （有趣的是，他们刚刚说他们会推出 W8，他们会更好地修复他们提供的无用浏览器中出现的所有垃圾）。

【讨论】：