滚动条在某些 div 上渲染,但在其他 div 上不渲染 [jScrollPane / jQuery]
我正在使用 jScrollPane 插件在某些 div 上呈现滚动条。我的问题是,其中一个 div 可以很好地显示其滚动条,而另一个 div 不仅不显示其滚动条,而且其中的内容也很混乱。
div 内的内容已重新排列(所有
位于顶部,然后所有
然后所有
造成这种现象有共同的原因吗?我最初认为这可能与包含图像的行为不当的 div 有关,因此我尝试启用 autoReinitialise,但我仍然遇到同样的问题。
编辑,获取更多内容:
行为不当的 div 称为 content
。有效的 div 称为 comments
。每个滚动条的 css 都是相同的 - 它们都引用相同的样式表。
js:
$(window).load(function() {
$("#content").jScrollPane(
{
autoReinitialise: true
}
);
});
$(document).ready(function(){
//scroll barzzz
$("#comments").jScrollPane();
});
css:
#content {
font-family: Helvetica, Arial, Sans-serif;
text-align: justify;
width: 95%;
height: 350px;
background-color: #fff;
padding: 20px;
opacity: 0.0;
margin: 10px;
overflow:auto;
border-radius: 15px;
border: solid 1px #eee;
}
#comments {
font-family: Helvetica, Arial, Sans-serif;
height: 300px;
width: 90%;
background-color: #fff;
padding: 10px 10px 10px 10px;
opacity: 0.0;
margin: 10px;
border-radius: 15px;
overflow:auto;
border: solid 1px #eee;
}
I'm using the jScrollPane plugin to render scrollbars on some divs. My problem is that one of the divs displays its scrollbars fine, whilst the other div not only does not display its' scrollbars, the content inside it is also messed with.
the content inside the div has been rearranged (all <p>
at the top, then all <img>
then all <h#>
etc) and all line breaks and other formatting have been removed. I can't figure out why this would be happening because both divs have exactly the same properties set in the stylesheet for the page.
Is there a common cause of this kind of thing? I initially thought it might be something to do with the misbehaving div containing images so I tried enabling autoReinitialise but I still experience the same problem.
edit, for more content:
the div that is misbehaving is called content
. the div that works is called comments
. the css for the scrollbars is identical for each - they both reference the same stylesheet.
js:
$(window).load(function() {
$("#content").jScrollPane(
{
autoReinitialise: true
}
);
});
$(document).ready(function(){
//scroll barzzz
$("#comments").jScrollPane();
});
css:
#content {
font-family: Helvetica, Arial, Sans-serif;
text-align: justify;
width: 95%;
height: 350px;
background-color: #fff;
padding: 20px;
opacity: 0.0;
margin: 10px;
overflow:auto;
border-radius: 15px;
border: solid 1px #eee;
}
#comments {
font-family: Helvetica, Arial, Sans-serif;
height: 300px;
width: 90%;
background-color: #fff;
padding: 10px 10px 10px 10px;
opacity: 0.0;
margin: 10px;
border-radius: 15px;
overflow:auto;
border: solid 1px #eee;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我遇到了类似的问题,通过将我的内容放入
标签中解决了这个问题。
由于某种原因,当可滚动 div 内的内容未由第二个块标记(如
或
包围)时,jScrollPanel 代码停止工作>。
I had a similar problem and it was solved by putting my content inside a
<p>
-tag.For some reason the jScrollPanel code stopped working when there was content inside the scrollable div that wasn't enclosed by a second block-tag like
<p>
or<h1>
.