작은 스크롤 막대 자동 높이

Question

팝업 안에 작은 스크롤 막대를 사용했습니다. 스크롤 div에는 아코디언 메뉴가 있습니다.

아코디언 메뉴가 확장되면 스크롤 막대가 확장되고 있지만 어떤 이유로 인해 아코디언 항목이 아래로 스크롤 될 때 볼 수 없습니다. 마지막 항목이 보이지 않도록 고정 된 높이를 사용한다고 생각합니다.

또한 새 아코디언 메뉴를 클릭 할 때마다 스크롤 막대가 div 상단에서 다시 시작되지만 메뉴 위치에 머물러 있기를 원합니다. 아코디언의 높이가 붕괴에서 수정되면

여기 내가 바이올린에서 본 바로는

$('#test').click(function(){ 
     $('#dialog').show(); 
    $('#scrollbar1').tinyscrollbar(); 
    $('#overlay').show(); 
}); 
//Accordion 
    $('#accordion-3').dcAccordion({ 
     eventType: 'click', 
     autoClose: true, 
     saveState: false, 
     disableLink: false, 
     showCount: false, 
     speed: 'slow' 
    }); 
$('#accordion-3').click(function(){ 
    $('#scrollbar1').tinyscrollbar(); 
    }); 

DEMO

Answer 1

아래의 코드와 데모 인의 tinyscrollbar는 업데이트되지 않습니다. 이를 위해 tinyscrollbar의 update() 메소드를 사용해야합니다. 하지만 이상한 점은 dcaccordion 문서에서 바인드 가능한 이벤트를 발견하지 못했기 때문에 애니메이션 이후에 업데이트를 주입 할 수 있다는 것입니다. jquery UI에서 아코디언을 사용하도록 예제를 약간 수정 했으므로 원하는대로 원하는대로 사용자 정의 할 수 있습니다. 희망이 도움이됩니다.)

$('#accordion-3').accordion({ 
activate: function (event, ui) { 
    var oScrollbar = $('#scrollbar1'); 
    oScrollbar.tinyscrollbar_update('relative'); 
}, 
heightStyle: "content", 
alwaysOpen: false, 
active: false, 
collapsible: true 

}; 이 내 수정 된 코드입니다

modified fiddle here