整頁水平滾動問題

整頁滾動是否有其他選擇？全頁面滾動的整頁水平滾動問題

例如

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

整頁水平滾動問題

回答

相關問題