Javascript 滚动窗格高度问题

我使用了从该站点提取的滚动条

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

。我已经为一些文本集成了ajax显示隐藏功能。我的问题是，如果在滚动窗格中使用ajax show hide，则滚动无法正常工作。如果我单击

单击打开

，一些文本将在其下方打开。但是底部的一些文本将不会显示。它被切断了。滚动高度不超过

下面是我的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>

这是ajax show hide的脚本

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

功能ajaxshow（id）{
document.getElementById（id）.style.display='block'；
}
函数ajaxhide（id）{
document.getElementById（id）.style.display='none'；
}
函数隐藏（id）{
if（document.getElementById）{
obj=document.getElementById（id）；
obj.style.display=“无”；
}
}

---

如何更正此问题？

当内容更改时，您需要重新初始化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();
}

---

可能您的问题是，您正在使用的滚动窗格脚本在内容更改时不会自动更新。因此，您需要一些东西来告诉脚本根据修改后的文本进行刷新

我不知道脚本，但我认为解决方案如下：

如您所见，在容器中放置新文本后，将调用

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

---

从标签/问题中，我发现您是JavaScript新手。您需要初始化滚动窗格。在导入jScrollPane之前，还需要导入。（顺便说一句，你所做的不是所谓的，只是普通的JavaScript）谢谢。它工作正常，但是当点击点击点击打开链接时，jspPane的宽度也会扩大。这是一个完全不同的问题，但是如果你不想要水平滚动条，你可以把

overflow-y:auto；溢出x：隐藏在容器类的CSS定义中。
// 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();