web-dev-qa-db-ja.com

jScrollPane（JQuery）で水平スクロールバーを無効にするにはどうすればよいですか？

水平スクロールバーを無効にする最良の方法を教えてください。

width: 100%とheight :280pxのdivがあります。長い連続したテキスト（スペースなし）がある場合、水平スクロールバーが表示されます。

ところで、私はjscrollPaneを使用しています。

任意の提案をいただければ幸いです。

jquery-jscrollpane
21
May

jScrollPane-設定オブジェクトのドキュメントで見つけたもの：

contentWidth-int（デフォルトは未定義）

スクロールペインのコンテンツの幅。 undefinedのデフォルト値により、jScrollPaneはそのコンテンツの幅を計算できます。ただし、場合によっては、これを無効にする必要があります（たとえば、水平スクロールを防ぐため、またはコンテンツのサイズの計算で信頼できる結果が返されない場合）。

したがって、水平バーを取り除くには、コンテンツの幅をコンテナの幅よりも低く設定するだけです。

例：

$('#element').jScrollPane({
    contentWidth: '0px'
});
38
Sławek Wala

SławekWala（contentWidth: '0px'）は本当に魔法の杖です:)

IE8では、不要な水平スクロールバーが弾性コンテナに表示されることがよくあります。しかし、それは問題の一部にすぎません。水平スクロールバーが表示されたときコンテンツは垂直ガターとスクロールバーの両方からオーバーフローします。
したがって、（他の回答が示唆しているように）水平スクロールバーを無効にして非表示にした場合、問題の2番目の部分が残ります。

contentWidth: '0px'両方の症状を修正します。

ただし、knowncitizenは正しかったのですが、contentWidthはintegerプロパティ（btw contentWidth: 'foo'同じきれいな結果が得られます）。
予測できない影響を回避するために、次のように正の数を使用できますが、十分に小さい数です。contentWidth: 1

9
Sago Sr.

これはかなり時代遅れの質問です。しかし、誰かがあなたと私と同じ問題を抱えている場合：

これを実現するためのプロパティやAPI呼び出しが見つからなかったため、CSSで無効にした簡単なソリューションを使用しました。

.jspHorizontalBar { display: none !important; }

あまりエレガントな方法ではありませんが、jScrollPaneコードを調査または「ハッキング」する時間を節約できました。

5
zergussino

パス horizontalDragMaxWidth: 0オプションに。

3
pixelmanya

ここではどのソリューションも機能しなかったので、ネストされたdivを使用して行ったことは次のとおりです。

JS

$('#scrollpane').jScrollPane();

HTML

<div id="scrollpane" style="max-height: 400px; width: 700px">
    <div style="overflow:hidden; width: 650px">
        Your long content will be clipped after 650px
    </div>
</div>
1
Ben

私はCSSを使用してこれを達成することができました。

親はクラスhorizontal-onlyを持つ必要があるため、水平バーのみが必要な場合は、クラスjspVerticalBarを子として追加し、horizontal-onlyクラスの下にのみ表示されるようにしました。表示されません。同じページに垂直方向と水平方向を設定した場合でも機能します。

div.horizontal-only .jspVerticalBar { display:none; }
1
ernesto sillas

他の答えを試して失敗した後、これを機能させるためにjScrollPaneをハックする必要がありました。 jquery.jscrollpane.jsの171行目

    pane.css('overflow', 'auto');
    // Hack: Combat size weirdness with long unbreakable lines.
    pane.css('position', 'static');
    // End hack
    if (s.contentWidth) {
            contentWidth = s.contentWidth;
    } else {
            contentWidth = pane[0].scrollWidth;
    }
    contentHeight = pane[0].scrollHeight;
    // Hack: Continued.
    pane.css('position', 'absolute');
    // End hack
    pane.css('overflow', '');

それがどれほど安全かはわかりませんが、それは私たちにとってはうまくいきます。

0
jamix

私にとって最善の解決策は、CSSのクラスleft: 0 !important;と.customSelectに.jspPaneを追加することでした。

.customSelect .jspPane {
        overflow-x: hidden;
        left: 0 !important;
}
0
Dmytro Satur