全页水平滚动问题 [英] Issue with full page horizontal scroll
本文介绍了全页水平滚动问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
完整页面滚动的其他选择吗?
整页滚动示例
http://jscrollpane.kelvinluck.com/fullpage_scroll.html
步骤1通过单击恢复按钮使窗口宽度变小。
step-1 make window width smaller by clicking Restore down button.
步骤2向右滚动
现在步骤3,点击最大化按钮使窗口宽度更大。
step-3 now, make window width bigger by clicking Maximize button.
现在,页面左对齐
jQuery
$(function()
{
var win = $(window);
win.bind(
'resize',
function()
{
var container = $('#full-page-container');
container.css(
{
'width': 1,
'height': 1
}
);
container.css(
{
'width': win.width(),
'height': win.height()
}
);
isResizing = false;
container.jScrollPane(
{
'showArrows': true
}
);
}
).trigger('resize');
$('body').css('overflow', 'hidden');
if ($('#full-page-container').width() != win.width()) {
win.trigger('resize');
}
});
CSS
html
{
overflow: auto;
}
#full-page-container
{
overflow: auto;
}
推荐答案
这里的事情是jScrollPane左侧添加jspPane: - 向右滚动时添加*** px。并且永远不会撤消损坏。
The thing here is that jScrollPane adds jspPane a left:-***px when you scroll to the right. And never undoes the damage.
如果你要添加:
$(' #full-page-container .jspPane')。css('left','auto');
在调整大小时,它会工作。虽然我建议您报告jScrollPane人员的错误。
In your resize, it will work. Although I suggest you report a bug for jScrollPane guys as well.
这篇关于全页水平滚动问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文