表格行的ScrollIntoView在IE 8中不起作用 [英] ScrollIntoView For Table Row Not Working in IE 8
本文介绍了表格行的ScrollIntoView在IE 8中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
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 =javascriptsrc ='scripts / jquery-1.3.2.js'>< / script>
< script language =javascriptsrc ='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％;
宽度：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）; //不会在IE8中工作
$ b $ //。scrollTo（ #scrollToRow）; //使用JQuery滚动到Lib不起作用
//location.hash ='scrollToAnchor'; //这个工作
}）;
< / 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>滚动此处< / div>
< / div>
< br>
< div id =scrollpanel>
< table id =tblRI/>
< tbody id =tbody1>
< tr id =tr1>
< td>资料< / td>
< td>资料< / td>
< / tr>
< tr id =tr2>
< td>资料< / td>
< td>资料< / td>
< / tr>
< tr id =tr3>
< td>资料< / td>
< td>资料< / td>
< / tr>
< tr id =tr4>
< td>资料< / td>
< td>资料< / 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）; //适用于IE8
// $ .scrollTo（＃scrollToRow）; //使用JQuery Scroll到Lib不起作用
//location.hash ='scrollToAnchor'; // This work
}）;
解决方案
答案稍晚，但我最近碰到与IE8类似的问题，我想我会分享这个来帮助其他类似问题的人。我正在研究的项目是试图避免使用jQuery库，所以这里是一个非jQuery解决方案。
基本上我通过设置scrollTop属性来实现一个解决方法我需要让它滚动到相关行的值。该值必须被计算。此解决方案针对垂直滚动问题。
代码详述如下。请注意，辅助功能 BrowserIsIE8（）可以通过WWW搜索轻松找到。
图1 ：主调用代码
var direction = determineRowScrollDirection（parentPane，row）;
scrollRowIntoView（parentPane，row，direction）;
图2：支持功能
//确定滚动的方向以将行放入视图。
函数determineRowScrollDirection（parentPane，row）
{
var parentTop = parentPane.scrollTop;
var parentBottom = parentTop + parentPane.clientHeight;
var childTop = row.offsetTop;
var childBottom = childTop + row.clientHeight;
var direction = 0; //行已在视图中，不需要滚动。
if（parentTop> childTop）
{
direction = -1; //需要滚动。
}
else if（parentBottom< childBottom）
{
direction = 1; //需要向下滚动。
}
返回方向;
}
//在相关方向滚动窗格以将行放入视图
函数scrollRowIntoView（parentPane，row，direction）
{
var distance = 0;
if（BrowserIsIE8（）&&方向！= 0）
{
// scrollIntoView（）在ie8下被破坏，所以我们需要这样做。
distance = calculateScrollTopDistance（row，direction）;
parentPane.scrollTop =距离;
}
else
{
//如果向上滚动...
if（方向== -1）
{
row.scrollIntoView（真）;
}
else if（direction == 1）//向下滚动。
{
row.scrollIntoView（false）;
}
}
}
//计算将行放入视图所需的距离。
函数calculateScrollTopDistance（parentPane，row，direction）
{
var distance = 0;
if（direction === -1）//向上滚动
{
distance = row.offsetTop;
}
else if（direction === 1）//向下滚动
{
var paddingLength = parentPane.clientHeight - row.clientHeight;
distance = row.offsetTop - paddingLength;
}
返回距离;
}
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
});
解决方案
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;
}
这篇关于表格行的ScrollIntoView在IE 8中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
