21

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

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

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

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

4

8 に答える 8

38

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

contentWidth - int (デフォルトは未定義)

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

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

例：

$('#element').jScrollPane({
    contentWidth: '0px'
});
于 2012-03-09T10:21:57.850 に答える
9

Sławek Wala ( )からの答えcontentWidth: '0px'は本当に魔法の杖です :)

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

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

しかし、knowncitizenは正しかったです。'0px ' は jScrollPane で奇妙なことを行いますcontentWidth: 'foo'。
予測不可能な影響を避けるために、次のように、正ではあるが十分に小さい数値を使用できます。contentWidth: 1

于 2013-03-05T10:06:58.363 に答える
5

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

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

.jspHorizontalBar { display: none !important; }

あまり洗練された方法ではありませんが、jScrollPaneコードを調査または「ハッキング」する時間を節約できます。

于 2012-01-23T17:27:02.863 に答える
3

オプションに渡しhorizontalDragMaxWidth: 0ます。

于 2012-06-15T12:56:05.143 に答える
1

CSSを使用してこれを実現できました。

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

div.horizontal-only .jspVerticalBar { display:none; }
于 2013-11-04T16:34:16.527 に答える
1

ここではどの解決策もうまくいきませんでしたので、ネストされた 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>
于 2013-07-28T10:03:20.707 に答える
0

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

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

于 2016-02-28T12:55:29.763 に答える
0

他の答えを試して失敗した後、これを機能させるために 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', '');

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

于 2014-06-23T16:46:27.127 に答える