滾動窗格高度問題

我已經使用從此站點提取的滾動條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>

這是我的CSS

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

這是阿賈克斯顯示隱藏

<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>

我怎樣才能糾正腳本？

來源

2012-02-09 designersvsoft

從標籤/問題，在我看來，你是新來的JavaScript。您需要初始化滾動窗格。並且您還需要在導入jScrollPane之前導入[jQuery庫]（http://jquery.com）。（P.S.你在做什麼不叫[AJAX]（http://en.wikipedia.org/wiki/Ajax_%28programming%29），它只是普通的JavaScript） – Dan 2012-02-09 09:31:12

當內容發生變化時，您需要重新初始化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(); 
}

來源

2012-02-09 09:25:27

謝謝。它工作正常，但jspPane的寬度也擴展了點擊點擊打開鏈接。 – designersvsoft 2012-02-09 09:56:34

這完全是一個不同的問題，但如果你不想水平滾動條，你可以把'overflow-y：auto; overflow-x：hidden;'在容器類的CSS定義中。 – 2012-02-09 10:03:44

謝謝。現在工作正常。 – designersvsoft 2012-02-09 10:18:10

也許你的問題是，你使用的滾動窗格腳本不會自動更新內容更改時。所以，你需要根據修改後的文本告訴腳本刷新。

不知劇本，但我認爲解決的辦法是在這裏：

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();

來源

2012-02-09 09:28:43

滾動窗格高度問題

回答

相關問題