我在div上使用JScrollPane来滚动它。 div包含一个自编写的javascript代码,可以从我的tumblr feed中获取最后几个帖子。但是,即使滚动窗格显示正常,由于某种原因它不会完全滚动div。这意味着当我滚动到jscroll的末尾时,div的可视区域下方仍有更多内容未显示。我想知道是否有人可以帮我解决这个问题.. 这是我正在使用的页面的链接: http://prisingh.com/#recent
这是文件的主要部分:
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" id="sourcecode">
$(function()
{
$('.scroll-pane').jScrollPane();
});
</script>
这是在身体部分:
<div class="tumblr scroll-pane">
<img src="images/recenttumblr.png" style="position:fixed;">
<script type="text/javascript" src="js/tumblr.js"></script>
</div>
以下是正在使用的javascript代码: http://www.prisingh.com/js/
编辑:现在我已经修复了原来的div加载问题,我想知道如何在窗口大小调整时使用div来动态地移动Jscrollpane。每次我调整窗口大小时,JScrollpane都会保留在最初加载网站时的位置。我尝试过使用插件提供的代码:$(function()
{
$('.scroll-pane').each(
function()
{
$(this).jScrollPane(
{
showArrows: $(this).is('.arrow')
}
);
var api = $(this).data('jsp');
var throttleTimeout;
$(window).bind(
'resize',
function()
{
if (!throttleTimeout) {
throttleTimeout = setTimeout(
function()
{
api.reinitialise();
throttleTimeout = null;
},
50
);
}
}
);
}
)
});
这还没有解决问题,滚动条使div保持与网站原始加载时相同的宽度。 有关演示,请访问prisingh.com/#recent并尝试在加载页面后调整窗口大小。
答案 0 :(得分:0)
试试这个
$(document).ready(function() {
var $images = $(".tumblr img")
, imageCount = $images.length
, counter = 0;
$images.one("load",function(){
counter++;
if (counter == imageCount) {
$('.scroll-pane').jScrollPane();
}
}).each(function () {
if (this.complete) {
$(this).trigger("load");
}
});
});