全页水平滚动问题
问题描述:
完整页面滚动的其他选择吗?
整页滚动示例
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.