Question

有人可以解释为什么以下在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似乎不适用于表行元素。如果我改为使用列选择器，它可以正常工作。

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

Answer 1

回答的时间不多，但我最近遇到了与IE8类似的问题，我想我会分享这个问题以帮助其他人解决类似的问题。我正在研究的项目是试图避免使用jQuery库，所以这里是一个非jQuery解决方案。

基本上我通过设置scrollTop属性来实现一个解决方法，该属性具有我需要的值以滚动到相关行。必须计算该值。此解决方案针对垂直滚动问题。

代码详述如下。请注意，可以通过WWW搜索轻松找到辅助功能BrowserIsIE8()。

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

Answer 2

它与javascript和jquery无关。 这是IE漏洞！

你可以轻松地测试这个，但只是试图在浏览器的url中输入你的一个tr的哈希值。

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

然后尝试转到此网页，输入此网址page.html#tr3

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

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

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

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

2 个答案: