为什么垂直滚动条会自动移动？

Question

为什么垂直滚动条会自动移动？

10

我不明白为什么在单击“第9行”时，垂直滚动条会自动移动到最顶部位置。进一步的点击不会移动滚动条。有人可以解释一下原因，并说明如何解决吗？我使用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;
}

- Misha Moroshko

有趣。看起来Opera 10.53也有同样的问题。不过IE8和Chrome没有问题。 - Aoi Karasu

2个回答

1

我复制并尝试了您的代码，使用Firefox 3.6.3和Chrome 5.0.375.29。但是我没有看到您所描述的任何情况，所以我感到很困惑。

只有在正常滚动时才会移动滚动条，而不是单击文本时。

- Mattijle

非常奇怪……你确定你点击了"第9行"？以下是查看问题的步骤：（1）重新加载网页（2）移动滚动条以查看“第9行”（3）点击“第9行”。在此单击后，滚动条会自动向上移动，只能看到“第0行”、“第1行”、“第2行”和“第3行”。我是唯一遇到这个问题的人吗？ - Misha Moroshko

@Misha 啊，现在我按照你的指示做了，我明白了。然而为了修复它，我将 .fadeIn() 和 .fadeOut 改成了 .css("display", "block") 和 .css("display", "none")，滚动效果开始按预期工作了。 - Mattijle

Mattijle：将表格单元格设置为“display:block”可以避免问题，但会引起其他问题，因为这些单元格不再有效地成为表格结构的一部分。我认为这个简单的例子并没有展示出这些问题，但在实际情况下这不是一个好主意。当您使用jQuery的fadeIn()或fadeOut()淡入/淡出表格单元格时，jQuery在“none”和“table-cell”之间切换显示，这是正确的。 - Ben Hull

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ben Hull · Accepted Answer

经过一些试错测试，看起来这与浏览器在淡入/淡出单元格时重新计算和重绘表格的时刻有关。您的代码没有问题，jQuery正确地切换了单元格的“display”属性——看起来这是FF中的一个小错误。

可能最简单的方法是避免切换表格单元格本身，而是切换列2单元格的内容，像这样：

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

因此，该脚本添加了column2单元格，并且该单元格始终可见 - 相反，我们在其中显示/隐藏<span class="details">。我已经在FF 3.6.3中测试了这个版本，它的行为符合预期！

哦 - 我还清理了您的jQuery选择器以提高性能。如果您想要更多信息，请告诉我！