Почему вертикальная полоса прокрутки перемещается автоматически?

Я не понимаю, почему вертикальная полоса прокрутки автоматически перемещается в самое верхнее положение при нажатии" Line 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;
}
9
css firefox3.6 html javascript jquery

2 ответов

после выполнения некоторых тестов проб и ошибок, похоже, что это связано с моментом, когда браузер пересчитывает и перерисовывает таблицу, когда вы исчезаете/исчезаете из одной из ячеек. В вашем коде нет ничего плохого, и 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="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 для лучшей производительности. Если вы хотите больше информации о почему, дайте мне знать!

6

Я скопировал и попробовал ваш код в Firefox 3.6.3 и Chrome 5.0.375.29. И не видел ничего из того, что вы описали, так что я в растерянности.

полоса прокрутки перемещается только при нормальной прокрутки, а не при нажатии на текст.

1