스크롤 할 때까지 스크롤 할 수있는 div 안에 내용이로드되지 않습니다.

Question

TL : 스크롤 가능한 div로 숨겨진 모든 요소를 ​​강제로 IE7에로드하는 방법?

페이지 집합을 탐색하기 위해 '접을 수있는'메뉴를 만들고 있습니다. 이 메뉴에는 두 가지 상태가 있습니다.
메뉴 항목은 책의 챕터와 비슷합니다. 사용자가 '활성'메뉴 항목을 아래로 이동 한 내용을 진행함에 따라 진행됩니다.
페이지로드시, 아이템이 활성화 된 메뉴 항목에서 오프셋을 뺀 마이너스로 즉시 스크롤 (!)되는 위치에있는 <div>을 원합니다.

평소와 마찬가지로 이것은 chrome 및 ff에서 완벽하게 작동하지만 ie7에서는 제대로 작동하지 않습니다.

폭발 한 상태에서 ie7은 페이지로드시 보이지 않는 경우 '로드'항목을 귀찮게하지 않는 것으로 보입니다. 무슨 일이 일어나고 ie7은 스크롤바 (또는 아주 작은)없이 메뉴 div를 시작합니다. scrollTop을 필요한 양으로 설정할 때. div는 스크롤바가 'div'의 하단으로 'bumps'가 될 때까지 아래쪽으로 스크롤되고 ie7은 다음 비트의 내용을로드하기 시작하고 다른 'bottom'등을 찾을 때까지 스크롤 할 수 있습니다.

나는 1000ms 길이의 애니메이션을 사용하여이 문제를 해결했다. 그것은 특정 요구 사항을 충족하지 못합니다 (그리고 못생긴 것처럼 보입니다) 그리고로드되지 않는 것처럼 보이기 전에 ie7이 요청되기 전에이 내용을로드하도록 강제 할 수 있습니다.

IE7 사용자가 가장 큰 대상 그룹이므로 건너 뛰지 않습니다. 자바 스크립트를 사용하지 않고도 사용자가 사용할 수있게 만드는 것은 큰 장점입니다.

내포 된 상태에는 아무런 문제가 없습니다. 폭발 한 상태에서 내파 된 상태의 CSS를 사용하고 나중에 올바른 값으로 설정했는데 도움이되지 않았습니다. 당신이 더 필요한 경우

scrollToCurrent = function(length){ 
    var prev = $("div.scroller div.selected").prev(); 

    // Check if previous exists 
    if($(prev).length > 0) { 
     // number of previous items * height of an item - half an items height 
     var scrollY = ($(prev).prevAll().length * $(prev).outerHeight()) - ($(prev).outerHeight()/2); 

     if(length === 0) { 
      $("div.scroller").scrollTop(scrollY); 
     } else { 
      $(".scroller").animate({ 
       scrollTop : scrollY 
      }, length); 
     } 
    } 
}; 

이 알려 :

는 여기에 몇 가지 코드입니다.

편집 : 기본 jsfiddle : http://jsfiddle.net/AmazingDreams/keeUY/ http://jsfiddle.net/AmazingDreams/keeUY/embedded/result/

Answer 1

UPDATE

는 최종 해결책은 정말 단순하게 증명했다. 아무 것도 작동하지 않고 한 상황을 고치는 것으로 보였으므로 (처음에 선택한 항목이 표시되는지 아닌지간에 큰 차이가 있음) 스크롤바에서 sh * t를 그냥 박살 내기로 결정했습니다.

이전의 모든 ' 아래 업데이트] FIX

: 수정 별도의 항목으로이를 배치하여 '그것을 수정'

scrollToCurrent = function(length){ 
     var prev = $("div.scroller div.selected").prev(); 

     // Check if previous exists 
     if($(prev).length > 0) { 
      // number of previous items * height of item - half an items height 
      var scrollY = ($(prev).prevAll().length * $(prev).outerHeight()) - ($(prev).outerHeight()/2); 

      if(length === 0) { 
       var i = 0; 
       var maxpushes = 100; 

       // Push just as long as needed to get the scrollbar to where we want it to (fixes ie7 issue) 
       while($("div.scroller").scrollTop() < scrollY) { 
        $("div.scroller").scrollTop(scrollY); 

        // Make sure it can never turn into an endless loop 
        i++; 
        if(i > maxpushes) { 
         break; 
        } 
       } 
      } else { 
       $(".scroller").animate({ 
        scrollTop : scrollY 
       }, length); 
      } 
     } 
    }; 

OLD NON-WORKING 내가으로 관리

시도 '

<div class="cycle inactive"> 
     <?php // I fix IE7 issues ?> 
    </div> 

<div>의 개행은 작업의 99 %를 수행한다고 생각합니다. 그래서 거기에 그 줄을 유지하십시오.

나는 이것이 '수정'이라고 생각하지 않으며이 질문을 공개적으로 남겨 둘 것입니다. 먼저 잠시 동안이 것이 안정되기를 바랍니다.

편집 :

음, 단지 주변의 문제를 설정이 '주요 업데이트'이 (즉, 작동이 중지 내파 일 폭발했다). 업데이트 수정 :

<?php // Only show if menu starts exploded ?> 
<?php if(! $imploded): ?> 
    <div class="cycle inactive"> 
     <?php // I fix IE7 issues ?> 
    </div> 
<?php endif; ?>