Firefox에서 jQuery .append() : 세로 스크롤 막대가 나타 납니까?

내 페이지의 대상 DIV에 .append()를 사용하여 동적으로 여러 DIV를 추가 한 다음 높이와 위치를 스크롤하지 않고 페이지에 모두 표시되도록 설정하려고합니다.Firefox에서 jQuery .append() : 세로 스크롤 막대가 나타 납니까?

모두 괜찮습니다. 그러나 Firefox (3.6.16의 우분투)에서는 새로운 DIV의 높이가 페이지 콘텐츠의 전체 높이에 추가되는 것처럼 세로 스크롤 막대가 나타납니다. 각 새로운 DIV 화면 상단 근처에 있으며 높이는 화면의 길이에 가깝지 않습니다. 우분투 크롬은 정상적으로 작동합니다. 새 DIV를 추가 한 후 대상 DIV의 높이를 jQuery에 요청하면 변경되지 않았습니다.

다음은 문제를 격리하기 위해 작성한 테스트 페이지의 대부분의 페이지 코드입니다. 미리 감사드립니다.

 <style type="text/css"> 
     #target { 
      width: 50px; 
      height: 50px; 
      background-color: #cfc; 
     } 
    </style> 
    <script> 
     $(document).ready(function() { 
      var cols = new Array('#660', '#606', '#066', '#993', '#939', '#399', '#cc9', '#c9c', '#9cc', '#ffc', '#fcf', '#cff'); 

      for(i = 0; i < 10; i++){ 
       $('#target').append('<div id="new_' + i + '">Hello</div>'); 
       $('#new_' + i) 
       .position({ 
        my: 'left top', 
        at: 'left top', 
        of: '#target', 
        offset: '' + (i * 20) + ' ' + (i * 10) 
       }) 
       .width(200) 
       .height(150) 
       .css('background-color', cols[i]); 
      } 
     }); 
    </script> 
</head> 
<body> 
    <div id="target"> 
    </div> 
</body>

출처

2011-04-29 user548958

는'오버 플로우를 추가하는 시도 유무 : 숨겨진;'# target' 요소에? – Seth

글자 높이가 150 픽셀이고 높이가 50 픽셀 인 요소를 추가하고 있습니다. 왜 당신은 ** 스크롤바를 기대하지 않습니까 **? – Pointy

안녕하세요 Pointy - 내 작은 50px div가 아니라 브라우저 창 전체에 스크롤바가 나타납니다. – user548958

<div> 요소에 "position : absolute"를 추가하면 스크롤바가 표시되지 않습니다.

jQuery UI ".position()"유틸리티는 영향을받는 요소 (추가 된 <div> 요소)를 "위치 : 상대"로 설정합니다 ("위치"로 설정하지 않은 경우). 그런 식으로 배치 된 요소는 페이지의 레이아웃 공간을 마치 이 아닌 것처럼이 아닌 "자연스러운"위치로 옮겼습니다. 따라서 페이지가 오버 플로우 되더라도 모든 엘리먼트를 추가 할 수 있습니다.

"position : absolute"라고 지정하면 일반적인 레이아웃 흐름에서 벗어납니다. Chrome이 동의하지 않는 이유 때문에 Chrome에서 동의하지 않습니다. 파이어 폭스가 실제로 올바른 일을하고 있다고 생각합니다. ( — <div>을 "target"에 마지막으로 추가하는 행을 추가하고 그 안에 작은 텍스트가있는 일반 제인 <div> 만 만들면 위치가 전혀 표시되지 않습니다. Chrome에서 페이지 아래쪽으로 이동하면 Firefox에서 제공하는 크기와 비슷한 크기의 스크롤 막대가 표시됩니다. 따라서 실제로 Chrome이 무언가가 실제로 오지 않는 한 팬텀 공간을 '소유권 주장하지 않음'으로 보입니다.)

Here은 jsfiddle입니다. 업데이트 된 코드 (한 추가 라인) :

이

$(document).ready(function() { 
     var cols = new Array('#660', '#606', '#066', '#993', '#939', '#399', '#cc9', '#c9c', '#9cc', '#ffc', '#fcf', '#cff'); 

     for(i = 0; i < 10; i++){ 
      $('#target').append('<div id="new_' + i + '">Hello</div>'); 
      $('#new_' + i) 
      .position({ 
       my: 'left top', 
       at: 'left top', 
       of: '#target', 
       offset: '' + (i * 20) + ' ' + (i * 10) 
      }) 
      .css('position', 'absolute') 
      .width(200) 
      .height(150) 
      .css('background-color', cols[i]); 
     } 
    });

출처

2011-04-29 12:52:47 Pointy

정말 고맙습니다. CSS 파일에 클래스 정의를 사용하여 새로 만든 모든 DIV가 절대 위치를 가지며 완벽하게 작동합니다. 정말 좋은 대답입니다. – user548958

당신은 css() 기능에서 그 물건을 모두 포함 할 수 있습니다 ...

데모 : http://jsfiddle.net/wdm954/xSYBr/

var cols = new Array('#660', '#606', '#066', '#993', '#939', '#399', '#cc9', '#c9c', '#9cc', '#ffc', '#fcf', '#cff'); 

for(var i = 0; i < 10; i++){ 
    $('#target').append('<div id="new_' + i + '">Hello</div>'); 
    $('#new_' + i).css({ 
     backgroundColor: cols[i], 
     position: 'absolute', 
     left: i * 20 + 'px', 
     top: i * 10 + 'px', 
     width: '200px', 
     height: '150px' 
    }); 
}

출처

2011-04-29 13:07:39 wdm

Firefox에서 jQuery .append() : 세로 스크롤 막대가 나타 납니까?

답변

관련 문제