全页水平滚动问题

问题描述:

完整页面滚动的其他选择吗?

整页滚动示例

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.