2012-12-29 13 views
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; 
} 
+0

jqueryコードを表示できますか? – Chanckjh

+0

@Chanckjh、あなたは更新された質問を見ることができます。 jscrollpaneのデモリンクを確認してください。 –

+0

私はちょうどクロムをチェックして、うん、それは起こる。 –

答えて

5

を残している、ここのものは、JScrollPaneにはjspPaneに左を追加するということです権利。ダメージを元に戻すことは決してありません。

あなたが追加した場合は

:あなたのサイズ変更で

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

、それが動作します。 jScrollPaneの人にもバグを報告することをお勧めします。

+0

フルページのスクロールの代替方法はありますか? –

+0

1つのプロジェクトでは、jScrollPaneの使用を開始し、途中で多くの同様の問題が発生しました。そこで私たちは小さな部品にのみ使用することにしました。これは特別な工夫が必要でしたし、Webkitのスクロールバースタイル(http://css-tricks.com/custom-scrollbars-in-webkit/)が追加されました。私たちの大半のユーザーはクロム/サファリを使用していたので、それで十分でした。 – povilasp

+0

ここにいくつかの代替のJavaScriptスクロールバーソリューションが掲載されています:http://stackoverflow.com/a/14150577/1085891 – JSuar