整页水平滚动问题

整页滚动是否有其他选择？全页面滚动的整页水平滚动问题

例如

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

来源

2012-12-29 Array out of bound

你可以显示你的jQuery代码？ – Chanckjh

@Chanckjh，你可以看到更新的问题。检查jscrollpane演示链接。 –

我刚刚在Chrome中检查过，是的，它发生了。 –

这里的事情是，JScrollPane的增加jspPane左： - *** PX当你滚动正确的。永远不会破坏伤害。

如果你想补充：

$('#full-page-container .jspPane').css('left', 'auto');

在你调整大小，它会工作。虽然我建议你也为jScrollPane家伙报告一个bug。

来源

2012-12-31 12:20:02 povilasp

整页滚动是否有其他选择？ –

在一个项目中，我们开始使用jScrollPane，并且一路上遇到了很多类似的问题。所以我们决定只将它用于小部件，它必须是额外的花式，并为其他所有部件添加了webkit滚动条样式（http://css-tricks.com/custom-scrollbars-in-webkit/）。由于我们的大多数用户使用chrome/safari，这已经足够了。 – povilasp

我在这里列出了一些可选的JavaScript滚动条解决方案：http://stackoverflow.com/a/14150577/1085891 – JSuar

整页水平滚动问题

回答

相关问题