使用版本:2.0.0beta11的jScrollPane jQuery插件(最新版本)...所有必需的文件都是最新的,直接从他们的网站提取:jScrollHorizontalPane
Firefox + IE没有问题。 Chrome,Opera + Safari最初不会显示滚动条,直到执行调整大小。最大化,恢复或手动调整窗口将提示浏览器显示滚动条...这是我的代码(窗格正在保存图像):
这是我的代码:
$(function () {
var win = $(window);
// Full body scroll
var isResizing = false;
win.bind('resize',
function () {
if (!isResizing) {
isResizing = true;
var container = $('#gallery_scroll');
// Temporarily make the container tiny so it doesn't influence the
// calculation of the size of the document
container.css({ 'width': 1, 'height': 1 });
// Now make it the size of the window...
container.css({ 'width': win.width(), 'height': 530 });
isResizing = false;
container.jScrollPane({ showArrows: true, autoReinitialise: true, enableKeyboardNavigation: true, animateScroll: true, horizontalGutter: 10 });
}
}
).trigger('resize');
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
//$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if ($('#gallery_scroll').width() != win.width()) {
win.trigger('resize');
}
$('#gallery_scroll').jScrollPane({ showArrows: true, autoReinitialise: true, enableKeyboardNavigation: true, animateScroll: true, horizontalGutter: 10 });
});
<div id='gallery'>
<div class='holder'>
<div id='gallery_scroll' class='scroll-pane horizontal-only'>
<ul class='blocks'>
@if(Model != null){
foreach (var item in Model)
{
<li class='scroll-interval'><img src="@Url.Content(item.Path)" style="height:500px; width:@item.Width;" alt="" /></li>
}
}
</ul>
</div>
</div>
</div>
我在这里遗漏了什么吗?
更新:也许我应该更直接...如果没有已知问题 - 暂时 - 是否有办法在初始加载后刷新jScrollPane()以暂时缓解此问题?