왜 수직 스크롤 막대가 자동으로 움직입니까?

"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; 
}

출처

2010-05-16 Misha Moroshko

흥미 롭습니다. Opera 10.53에서도 같은 문제가있는 것 같습니다. IE8과 Chrome은 문제없이 작동합니다. –

몇 번의 시행 착오를 거친 후 셀 중 하나가 페이드 인/페이드 아웃 될 때 브라우저가 테이블을 다시 계산하고 다시 그리는 순간과 관련이있는 것처럼 보입니다. 코드에 아무 문제가 없으며 jQuery가 셀의 '디스플레이'속성을 올바르게 전환하고 있습니다. 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>

그래서, 스크립트가 2 열 셀을 추가하고, 그 유지 전체 시간에 표시 - 그 대신 <span class="details">을 표시하거나 숨 깁니다. 나는 FF 3.6.3에서이 버전을 테스트했고, 그것이해야하는 것처럼 행동한다!

오 - 더 나은 성능을 위해 jQuery 선택기를 정리했습니다. 이유에 대한 자세한 정보가 필요하면 알려주세요!

출처

2010-05-20 15:50:21 Beejamin

좋은 해결 방법이지만 문제가 완전히 해결되지는 않습니다. 우리의 경우'.column2'는 고정 된'width'와'background-color'를 가지고 있습니다. 이 속성을 CSS 코드에 추가하면 세부 사항 범위가 표시되지 않더라도 '배경색'이 표시됩니다. 그에 따라 질문을 편집 할 것입니다. 또한, 제 jQuery 선택기가 광산보다 성능이 좋은 이유를 알려주십시오. –

오페라에서도 나타납니다. –

OK - 문제의 원인을 제거하기 위해 column2가 항상 표시되어야한다고 생각합니다.내 믿음은 직접적인 원인 인 셀의 표시 및 숨김이라는 것입니다. 이유는 다음과 같습니다. 대부분의 요소와 달리 TD는 주변 요소와 상호 종속성이 있습니다. 한 셀의 크기는 같은 행의 다른 셀과 동일한 열의 다른 셀의 너비에 따라 달라질 수 있습니다. .fadeIn()을 통해 새 셀을 추가하는 경우 브라우저는 테이블의 다른 셀 일부 또는 전체의 치수를 다시 계산해야합니다. (계속) – Beejamin

내가 복사 파이어 폭스 3.6.3과 크롬 5.0.375.29에 코드를 시도했다. 그리고 당신이 묘사 한 것을 본적이 없어서 나는 상실감에 처했습니다.

스크롤 막대는 텍스트를 클릭 할 때가 아니라 정상적으로 스크롤 할 때만 움직입니다.

출처

2010-05-16 15:51:15 Mattijle

아주 이상합니다 ... "Line 9"을 클릭 했습니까? 문제를보기위한 단계는 다음과 같습니다. (1) (Re) 페이지로드 (2) 스크롤 막대를 움직여 "Line 9"(3) "Line 9"를 클릭하십시오. 이 클릭 후 스크롤 막대가 자동으로 위로 이동하여 "선 0", "선 1", "선 2"및 "선 3"만 보입니다. 나는이 문제를 경험 한 유일한 사람인가? –

@Misha 아, 이제 내가 너의 지시를 따랐다. 나는 그것을 본다. 그러나 수정하려면 .fadeIn() 및 .fadeOut을 .css ("display", "block") 및 .css ("display", "none")로 변경하고 스크롤이 의도대로 작동하기 시작했습니다. . – Mattijle

Mattijle : 표 셀을 'display : block'으로 설정하면 문제가 발생하지만 다른 문제가 발생합니다. 셀이 더 이상 효과적으로 표 구조의 일부가 아니기 때문입니다. 나는이 간단한 예제가 이러한 문제들을 보여주지는 못한다고 생각하지만 실제 시나리오에서는 좋은 생각이 아니다. jQuery를 사용하여 표 셀을 fadeIn() 또는 fadeOut()하면 jQuery는 표시를 '없음'과 '표 셀'간에 올바르게 전환합니다. – Beejamin

왜 수직 스크롤 막대가 자동으로 움직입니까?

답변

관련 문제