全屏水平滚动问题

8

有没有其他替代全屏滚动的方法?

全屏滚动的例子:

http://jscrollpane.kelvinluck.com/fullpage_scroll.html

步骤1:点击还原按钮,使窗口宽度变小。

步骤2:向右滚动。

步骤3:现在,点击最大化按钮,使窗口宽度变大。

现在,页面左对齐了。

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;
}

你能展示一下你的jQuery代码吗? - Chanckjh
@Chanckjh,你可以看到更新的问题。请检查jscrollpane演示链接。 - Array out of bound
我刚在Chrome中检查了一下,没错,它发生了。 - Bogdan Kulynych
1个回答

5
这里的问题在于,当您向右滚动时,jScrollPane会为jspPane添加一个left:-***px。而且从不撤消这种伤害。
如果您添加以下内容: $('#full-page-container .jspPane').css('left', 'auto');
在调整大小时,它将起作用。虽然我建议您也向jScrollPane团队报告错误。

是否有其他的全屏滚动替代方案? - Array out of bound
在一个项目中,我们开始使用jScrollPane,并且在过程中遇到了许多类似的问题。因此,我们决定只在需要特别炫酷的小部分中使用它,并为其他所有内容添加了一个webkit滚动条样式(http://css-tricks.com/custom-scrollbars-in-webkit/)。由于我们大多数用户使用Chrome/Safari浏览器,这已经足够好了。 - povilasp
我在这里列出了一些JavaScript滚动条的替代解决方案:https://dev59.com/RGox5IYBdhLWcg3wWzN7#14150577 - JSuar

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接