5

コンテンツの横にガターを強制するのではなく、コンテンツの上にスクロールバーを配置したいと思います。

添付の画像では、赤いスクロールバーで現在何が行われているのかを確認できます...コンテンツを横に押す垂直方向のガターが作成されます。

しかし、私がやりたいのは、下部にあるものです...コンテンツの上にスクロールバーを配置します。

私は絶対にポジショニングを試みまし.jspVerticalBarたが、溝を取り除くことができませんでした。

ここに画像の説明を入力してください

編集：問題のjsFiddleは次のとおりです。http：//jsfiddle.net/8Mebt/3/-ご覧のとおり、右端にはまだギャップがあり、アイテムの「選択された」状態がすべてに及ぶわけではありません。私が望むように途中で。

4

3 に答える 3

8

は.jspVerticalBarすでに絶対に配置されています。そのrightプロパティを必要なものに設定し、また設定します

.jspHorizontalBar, .jspVerticalBar, .jspTrack {
    background: none repeat scroll 0 0 transparent;
}

ガター（jscrollpaneで呼び出されるトラック）の背景が透明になるようにします。

http://jsfiddle.net/gaby/DsDQP/でのデモ

アップデート

コメント（jsfiddleを含む）の後、ここに私の回避策があります。

設定をにverticalGutter設定し0、jspPaneの幅を再計算して、jspTrackの幅を含めます。

$('.scroll-pane').jScrollPane({verticalGutter:0});
$('.jspPane').css({width:'+=' + $('.jspTrack').width()});

http://jsfiddle.net/gaby/DsDQP/8/のデモ

再計算は、再初期化のたびに呼び出す必要があります。

これが必要なのは、jspPane（コンテンツverticalGutter）の幅が、コンテナーの幅を計算し、との幅を削除することによってjavascriptを介して追加されているため.jspTrackです。または、CSSを使用して幅を再定義し、!importantディレクティブを使用して、@Evgenyがコメントで言及しているようにjavascriptを介して追加された幅をオーバーライドすることもできます。

于 2011-06-20T11:26:03.960 に答える
6

jScrollPaneの初期化に負のverticalGutter値を設定すると、追加のアクションを必要とせずにトリックを実行できます。

$('.scroll-pane').jScrollPane({verticalGutter:-100})

http://jsfiddle.net/DsDQP/50/

于 2012-08-13T07:49:46.500 に答える
0

あなたはこのようにそれを試みることができます.....

    //Should it (the #parentContainer) have had a "scroll-pane" class

        $('#parentContainer').jScrollPane()

    $.each(data, function(i, value) {

//Detach scrolling capabilities
        $('#parentContainer').jScrollPaneRemove();

        $('<div/>',{
        class:'anyClass',
        id:'anyId'
        })
        .appendTo(#childContainer);

//Return back Scrolling capabilities to the parent container    
        $('#parentContainer').jScrollPane();            


        ///-> Loop Ends
                });

これにより、ループが作成されるたびにスクロール機能が更新されます。したがって、子コンテナ内のデータストアのサイズに応じて、ScrollBarの長さが増減します。

お役に立てば幸いです。

最高

于 2013-05-07T09:11:29.550 に答える