스크롤 창 높이 문제

Question

이 사이트에서 추출한 스크롤 막대는 http://jscrollpane.kelvinluck.com/arrow_hover.html입니다. 일부 텍스트에 ajax show hide 함수를 통합했습니다. 내 문제는 스크롤 창 내에서 ajax show hide를 사용하면 스크롤이 제대로 작동하지 않는다는 것입니다. Click to open을 클릭하면 일부 텍스트가 아래에 열립니다. 그러나 하단의 일부 텍스트는 표시되지 않습니다. 그것은 끊어진다. 스크롤 높이는 초과하지 않습니다.

다음은 내 html 코드입니다.

<div class="scroll-pane"> 
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices 
    eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci 
    mi, in pharetra ligula. Nulla facilisi. Nulla facilisi. Mauris convallis venenatis massa, quis 
    consectetur felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies 
    bibendum. Vivamus diam leo, faucibus et vehicula eu, molestie sit amet dui. Proin nec orci et elit 
    semper ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus 
    mus. Sed quis urna mi, ac dignissim mauris. Quisque mollis ornare mauris, sed laoreet diam malesuada 
    quis. Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere. Vestibulum nec risus 
    eu lacus semper viverra. </p> 
    <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit 
    amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </p> 
    <p> 
    <div class="avatar_content"> 
    <div><strong>KeysorSoze:</strong></div> 
    <p>Spitfire might thwart the 3-peat but he won’t thwart The Dynasty. One and done, Levi!</p> 
    <div><a href="javascript:void(0);" onClick="javascript:ajaxshow('replybox');">Click to open</a></div> 
    </div> 
    <div id="replybox" style="display:none;"> 
    <div align="right" style="position:relative;"><a href="javascript:void(0);" onClick="javascript:ajaxhide('replybox');">close</a></div> 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
     Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit 
     amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 
     Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
     Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit 
     amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </p> 
    </div> 
    <div style="clear:both"></div> 
    </p> 
    <p> last content</p> 
</div> 

이이 아약스 쇼 숨기기 내가 그것을 해결할 수 방법

<script type="text/javascript"> 
function ajaxshow(id){ 
document.getElementById(id).style.display = 'block'; 
} 
function ajaxhide(id){ 
document.getElementById(id).style.display = 'none'; 
} 
function hide(id){ 
if (document.getElementById){ 
obj = document.getElementById(id); 
obj.style.display = "none"; 
} 
} 

</script> 

위한 스크립트입니다

.scroll-pane 
{ 
    width: 500px; 
    height: 200px; 
    overflow:auto; background-color:#CCCCCC; 
} 

내 CSS는 무엇입니까?

Answer 1

내용이 변경되면 jScrollPane을 다시 초기화해야합니다. 이 줄에있는 항목 :

function ajaxshow(id){ 
    document.getElementById(id).style.display = 'block'; 
    jQuery('.scroll-pane').jScrollPane(); 
} 
function ajaxhide(id){ 
    document.getElementById(id).style.display = 'none'; 
    jQuery('.scroll-pane').jScrollPane(); 
} 

Answer 2

콘텐츠가 변경 될 때 사용중인 스크롤 창 스크립트가 자동으로 업데이트되지 않는 경우가 있습니다. 수정 된 텍스트에 따라 새로 고침으로 스크립트를 알리는 것이 필요합니다.

나는 스크립트를 모르겠지만,이 솔루션은 여기에 생각 :

http://jscrollpane.kelvinluck.com/dynamic_content.html

당신이 볼 수 있듯이, 새로운 텍스트가 용기 내부에 배치 된 후에하는 .reinitialise() 방법 호출됩니다.

나는 그것에서 다시 시작할 수 있습니다 : 태그/질문에서

// Create scroll pane 
var pane = $('.scroll-pane') 
pane.jScrollPane({ showArrows: true }); 
var api = pane.data('jsp'); 

// Append text (your "show more" link) 
// [...] 

// Refresh pane 
api.reinitialise();