jScrollPane - 내용이 "수직 스크롤바가 증가하지 않습니다"

Question

jScrollPane (위대한 물건!) 내 포트폴리오 웹 사이트에있는 스크롤바에 사용하고 있습니다. 그러나 나는 스스로 해결할 수없는 문제를 겪고 있습니다.

jQuery를 사용하여 div의 너비와 길이를 변경할 때 문제가 강조 표시됩니다.

나는 너비가 180px 인 열 (div # projects)이 있습니다. 해당 div 안에는 링크 목록이 있습니다. 사용자가 링크를 클릭하면 div는 480px 너비로 '성장'해야합니다. 또한 div의 내용이 변경됩니다. 링크 목록이 사라지고 프로젝트 목록이 표시됩니다. 그 작품은 작동합니다. 하지만 jScrollPane은 내가 원하는대로 컨텐트가 커지지 않을 것입니다. 나는 그것에 2 가지 다른 문제가있다.

Safari : Safari에서 세로 스크롤 막대가 콘텐츠와 함께 자동으로 커집니다. 그래서 잘 작동합니다. 그러나 div의 너비가 400px로 증가하면 갑자기 너비가 180px (div의 이전 너비) 인 가로 스크롤 막대가 나타납니다. .

파이어 폭스 : 가장 큰 문제는 파이어 폭스입니다. 거기에서, 수직 스크롤바는 내용과 함께 자동으로 증가하지 않을 것입니다. 나는 autoReinitialise를 사용해 보았는데, 이는 수직 스크롤바가 내용물과 함께 커지면서 잘 동작하지만 또 다른 문제점을 안겨다 준다. autoReinitialise를 사용할 때 방금 480px로 성장한 div는 다시 180px로 돌아갑니다. 그래서 autoReinitialise는 내 문제를 해결하지 못합니다.

Firefox에서는 링크를 클릭하고 프로젝트를 볼 때 한 div가 제대로 보이지 않는 것을 볼 수 있습니다. 이전 콘텐츠의 높이 (링크가있는 목록)입니다.

그건 내 가장 큰 문제입니다. 하지만 또 다른 작은 질문이 있습니다. 항상 스크롤바를 표시하거나 모든 div.scroll 창에 고유 한 클래스를 제공 할 수 있습니까? 원인 div # 프로젝트의 너비를 480px로 조정하면 스크롤 창 컨테이너의 너비도 변경해야합니다. 이제 모든 div에 고유 한 클래스를 제공하기 위해 jQuery를 사용합니다. 그리고 스크롤바가 항상 보이지 않는 경우 항상 같은 양의 div가있는 것은 아닙니다. 이제는 스크롤바를 다른 div를 내용 아래에 두어 항상 표시합니다. 하지만 모든 스크롤 창 div에 고유 한 클래스 (수동)를 제공 할 수 있다면 항상 스크롤 막대를 표시 할 필요가 없습니다.

웹 사이트는 http://nieuw.yworks.nl입니다. 부분적으로 "프로젝트"div. 해당 div의 링크를 클릭하면 문제가 표시됩니다. (사파리와 부분적으로 파이어 폭스).

누군가가이 문제를 해결할 수 있기를 바랍니다. 나는 이미 2 일 동안 고투하고있다.

미리 감사드립니다

편집 (그리고 내 영어 :)이 나쁘지 않다 희망) : 나는 사파리 5.4.1와 파이어 폭스 9.0.1을 사용합니다. Internet Explorer에서 테스트하지 않았 더라면 더 많은 문제가 발생할 것입니다.

---

나는이 문제를 발견했다고 생각한다. 이 div (그림 : http://nieuw.yworks.nl/extern/divs.png)는 여전히 480px 대신 180px입니다. 단 한 가지는, 나는 지금 왜. 이것은 코드입니다 :

$ (". 항목 -30") .css ("width", "480px"); $ (". 항목 -31") .css ("width", "420px");

   $("#projects").stop().animate({width:'480px'},{queue:false, duration:300}); 

       $("#projects").css("background","#fff"); 

       $('#projectsList').hide(); 
       $('#projectsContent').show(); 
       $("#contact").stop().animate({left:'1524px'},{queue:false, duration:300}); 
       $("#footer").stop().animate({left:'1745px'},{queue:false, duration:300}); 

       var api = $('#projects').jScrollPane().data('jsp'); 
       api.destroy(); 
       $('#projects').jScrollPane({contentWidth:480}).data('jsp'); 

그리고 Firefox에서는 작동하지 않는 애니메이션 원인을 사용하지 않고 단지 $ ("# projects") 만 사용합니다.css ("width", "480px");

이것은 제 질문의 두 번째 부분에서 언급 한 것과 같은 문제입니다. .jspContainer 및 .jspPane div에는 고유 ID가 없습니다. 그리고 jScrollPane이 그것들을 생성하도록 만들 수는 없습니다. 그리고 .jspContainer 및 .jspPane을 조정하는 경우 해당 div에 대한 것보다. jQuery를 통해 파일의 너비를 조정하면 덮어 씁니다.

Answer 1

이 시도 :

var api = $('#projects').jScrollPane().data('jsp'); 
api.destroy(); 
$("#projects").stop().animate({width:'480px'},300, function(){ 
         $('#projects').jScrollPane({contentWidth:480}).data('jsp'); 
        }); 

명확한 설명 :

1) 애니메이션 파이어 폭스에 절대적으로 잘 작동 당신은 직접의 jspContainer 또는 jspPane 크기의 크기를 변경할 필요가 없습니다해야

2) 이것들은 jscrollpane에 의해 초기화 될 때 설정됩니다.

var api = $('#projects').jScrollPane().data('jsp'); 
api.reinitialise(); 

: 호출하여 : 만 스크롤의 내용을 변경하는 경우 이런 식으로 뭔가를 수행하여 스크롤과의 contentPane를 다시 계산 할 수 있도록

$('#projects').jScrollPane().data('jsp'); 

3) 당신은 단지 그것을 재 초기화 할 필요가 4) div의 크기를 실제로 변경하는 경우 jscrollpane을 호출하면 jscrollpane의 인스턴스를 삭제하고 다시 만들어야합니다. 나는이 일 때 가장 안전 폭을 변경하는과 같이 명시 적으로 폭을 지정하는 경우 것으로 나타났습니다 : 당신은 폭을 애니메이션하는 경우

가

var api = $('#projects').jScrollPane().data('jsp'); 
api.destroy(); 
$('#projects').width(480); 
$('#projects').jScrollPane({contentWidth:480}).data('jsp'); 

5), 당신이 애니메이션을하기 전에 완료 될 때까지 기다릴 필요

 var api = $('#projects').jScrollPane().data('jsp'); 
    api.destroy(); 
    $("#projects").animate({width:'480px'},300, function(){ 
         $('#projects').jScrollPane({contentWidth:480}).data('jsp'); 
        }); 

6 내가 비슷한 효과을하려고 때) : 당신과 같이 애니메이션의 콜백 함수에서 스크롤을 초기화하도록 스크롤을 재 초기화 할 수 있습니다. 나는 하나의 애니메이션 시리즈를 시작하고 싶었다. 당신은 예를 들어 최근의 콜백 내에서 각 애니메이션을 중첩하여이 작업을 수행 할 수 있습니다 :

$("#projects .content").animate({opacity:0},300, function(){ //anim branch 1 
      //content fade animation finished now do this: 
      var api = $('#projects').jScrollPane().data('jsp'); 
      api.destroy(); 
      $("#projects").animate({width:'480px'},300, function(){ 
          // width change animation finished now do this: 
          $('#projects').jScrollPane({contentWidth:480}).data('jsp'); 
          //fade content back in 
          $("#projects .content").animate({opacity:1},300); 
      }); 
}); 
$("#contacts").animate({left:1000},300); //anim branch 2 

7) 당신이 $ ('요소를.')를 사용하는 경우이 디스플레이의 요소를 설정합니다) (숨기기 :. 없음을; 페이지 밖으로 가져 오면, dic의 내용을 표시하지 않고 jscrollpane을 적용하려고하면 크기가 잘못 계산됩니다. 대신 불투명도를 애니메이션으로 적용하지만 불투명도를 지원하지 않는 브라우저에서는 작동하지 않습니다.

8) 마지막으로, 예제 6에는 두 개의 애니메이션 브랜치가 있으며 동시에 실행됩니다.

Answer 2

창이로드 된 후 jscrollpane()을 적용하는 것이 좋습니다. 그것은 document.ready을 사용하는 대신 windows.load을 사용합니다.