为什么垂直滚动条自动移动？ [英] Why the vertical scroll bar moves automatically?
问题描述
我不明白为什么垂直滚动条会自动移动到9号线点击时的最高位置。其他点击不会移动滚动条。任何人都可以解释为什么，如何解决这个问题？
我使用的是Firefox 3.6.3。
$ b HTML：
< HTML>
< head>
< link rel =stylesheethref =test.csstype =text / css/>
< script src =http://code.jquery.com/jquery-latest.js>< / script>
< script language =JavaScriptsrc =test.js>< / script>
< / head>
< body>
< div>
< table>
< tr row ='0'>< td class ='column1'>第0行< / td>< / tr>
< tr row ='1'>< td class ='column1'> Line 1< / td>< / tr>
< tr row ='2'>< td class ='column1'>第2行< / td>< / tr>
< tr row ='3'>< td class ='column1'> Line 3< / td>< / tr>
< tr row ='4'>< td class ='column1'>第4行< / td>< / tr>
< tr row ='5'>< td class ='column1'> Line 5< / td>< / tr>
< tr row ='6'>< td class ='column1'>第6行< / td>< / tr>
< tr row ='7'>< td class ='column1'>第7行< / td>< / tr>
< tr row ='8'>< td class ='column1'>第8行< / td>< / tr>
< tr row ='9'>< td class ='column1'>第9行< / td>< / tr>
< / table>
< / div>
< / body>
< / html>
JS：
< code $ $（document）.ready（function（）{
$（。column1）。each（function（index）{
$（this）.after（< td class ='column2'> Details+ index +< / td>）;
$（this）.toggle（function（）{$（[row ='+ index +'] （））。fadeIn（fast）}，
function（）{$（[row ='+ index +'.column2）。fadeOut（fast）}）;
}）;
}）;
CSS：
div {
overflow：auto;
height：100px;
width：300px;
border：1px纯蓝色;
}
.column1 {
cursor：pointer;
width：100px;
background-color：green;
颜色：白色;
}
.column2 {
display：none;
width：200px;
background-color：blue;
颜色：白色;
}
测试，它看起来像是当你淡入/淡出其中一个单元格时浏览器重新计算和重绘表格的时刻。你的代码没有问题，jQuery正确地切换单元格的'display'属性 - 它看起来像是FF中的一个小错误。
可能是最简单的方法避免切换表格单元格，而是切换column2单元格的内容，如下所示：
< ;! DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html>
< head>
< link rel =stylesheethref =test.csstype =text / css/>
< script src =http://code.jquery.com/jquery-latest.js>< / script>
< script language =JavaScript>
$（document）.ready（function（）{
$（td.column1）。each（function（index）{
$（this）.after（'< td class =column2>< span class =details> Details'+ index +'< / span>< / td>'）;
$（this）.toggle（
）function（）{$（this）.siblings（'。column2'）。children（'span.details'）。fadeIn（fast）}，
function（）{$（this）.siblings '.column2'）。children（'span.details'）。fadeOut（fast）}
）
}）;
}）;
< / script>
< style type =text / cssmedia =screen>
div {
overflow：auto;
height：100px;
width：300px;
border：1px纯蓝色;
}
.column1 {
cursor：pointer;
}
.column2 .details {
display：none;
}
< / style>
< / head>
< body>
< div>
< table>
< tr row ='0'>< td class ='column1'>第0行< / td>< / tr>
< tr row ='1'>< td class ='column1'> Line 1< / td>< / tr>
< tr row ='2'>< td class ='column1'>第2行< / td>< / tr>
< tr row ='3'>< td class ='column1'> Line 3< / td>< / tr>
< tr row ='4'>< td class ='column1'>第4行< / td>< / tr>
< tr row ='5'>< td class ='column1'> Line 5< / td>< / tr>
< tr row ='6'>< td class ='column1'>第6行< / td>< / tr>
< tr row ='7'>< td class ='column1'>第7行< / td>< / tr>
< tr row ='8'>< td class ='column1'>第8行< / td>< / tr>
< tr row ='9'>< td class ='column1'>第9行< / td>< / tr>
< / table>
< / div>
< / body>
< / html>
因此，该脚本添加了column2单元格，并且整个时间保持可见 - 相反，我们显示/隐藏其中的< span class =details> >。我已经在FF 3.6.3中测试过这个版本，它的行为应该是这样！
哦 - 我清理了你的jQuery选择器以获得更好的性能。如果你想了解更多信息，请告诉我！
I don't understand why the vertical scroll bar moves automatically to the most top position when "Line 9" clicked, for example. Further clicks does not move the scroll bar. Could anyone explain why, and how to fix this ? I work with Firefox 3.6.3.
HTML:
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript" src="test.js"></script>
</head>
<body>
<div>
<table>
<tr row='0'><td class='column1'>Line 0</td></tr>
<tr row='1'><td class='column1'>Line 1</td></tr>
<tr row='2'><td class='column1'>Line 2</td></tr>
<tr row='3'><td class='column1'>Line 3</td></tr>
<tr row='4'><td class='column1'>Line 4</td></tr>
<tr row='5'><td class='column1'>Line 5</td></tr>
<tr row='6'><td class='column1'>Line 6</td></tr>
<tr row='7'><td class='column1'>Line 7</td></tr>
<tr row='8'><td class='column1'>Line 8</td></tr>
<tr row='9'><td class='column1'>Line 9</td></tr>
</table>
</div>
</body>
</html>
JS:
$(document).ready(function() {
$(".column1").each(function(index) {
$(this).after("<td class='column2'>Details " + index + "</td>");
$(this).toggle(function() { $("[row='" + index + "'] .column2").fadeIn("fast") },
function() { $("[row='" + index + "'] .column2").fadeOut("fast") });
});
});
CSS:
div {
overflow: auto;
height: 100px;
width: 300px;
border: 1px solid blue;
}
.column1 {
cursor: pointer;
width: 100px;
background-color: green;
color: white;
}
.column2 {
display: none;
width: 200px;
background-color: blue;
color: white;
}
After doing some trial and error tests, it looks like this is related to the moment that the browser recalculates and redraws the table when you fade in/fade out one of the cells. There's nothing wrong with your code, and jQuery is correctly toggling the 'display' property of the cell - it looks like it's a minor bug in FF.
Probably the easiest way around it is to avoid toggling table cells themselves, and instead toggle the contents of the column2 cell, like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript">
$(document).ready(function() {
$("td.column1").each(function(index) {
$(this).after('<td class="column2"><span class="details">Details ' + index + '</span></td>');
$(this).toggle(
function(){$(this).siblings('.column2').children('span.details').fadeIn("fast")},
function(){$(this).siblings('.column2').children('span.details').fadeOut("fast")}
)
});
});
</script>
<style type="text/css" media="screen">
div {
overflow: auto;
height: 100px;
width: 300px;
border: 1px solid blue;
}
.column1 {
cursor: pointer;
}
.column2 .details{
display:none;
}
</style>
</head>
<body>
<div>
<table>
<tr row='0'><td class='column1'>Line 0</td></tr>
<tr row='1'><td class='column1'>Line 1</td></tr>
<tr row='2'><td class='column1'>Line 2</td></tr>
<tr row='3'><td class='column1'>Line 3</td></tr>
<tr row='4'><td class='column1'>Line 4</td></tr>
<tr row='5'><td class='column1'>Line 5</td></tr>
<tr row='6'><td class='column1'>Line 6</td></tr>
<tr row='7'><td class='column1'>Line 7</td></tr>
<tr row='8'><td class='column1'>Line 8</td></tr>
<tr row='9'><td class='column1'>Line 9</td></tr>
</table>
</div>
</body>
</html>
So, the script adds the column2 cell, and that stays visible the whole time - instead we show/hide the <span class="details"> within it. I've tested this version in FF 3.6.3 and it behaves as it should!
Oh - and I cleaned up your jQuery selectors for better performance. If you want more info on why, let me know!
这篇关于为什么垂直滚动条自动移动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
