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

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

9 голосов
/ 16 мая 2010

Я не понимаю, почему вертикальная полоса прокрутки автоматически перемещается в самое верхнее положение, например, при нажатии «Строка 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;
}

Ответы [ 2 ]

6 голосов
/ 20 мая 2010

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

1 голос
/ 16 мая 2010

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

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

...