水平スクロールバーを無効にする最良の方法を教えてください。
width: 100%
とheight :280px
のdivがあります。長い連続したテキスト(スペースなし)がある場合、水平スクロールバーが表示されます。
ところで、私はjscrollPaneを使用しています。
任意の提案をいただければ幸いです。
jScrollPane-設定オブジェクトのドキュメントで見つけたもの:
contentWidth-int(デフォルトは未定義)
スクロールペインのコンテンツの幅。 undefinedのデフォルト値により、jScrollPaneはそのコンテンツの幅を計算できます。ただし、場合によっては、これを無効にする必要があります(たとえば、水平スクロールを防ぐため、またはコンテンツのサイズの計算で信頼できる結果が返されない場合)。
したがって、水平バーを取り除くには、コンテンツの幅をコンテナの幅よりも低く設定するだけです。
例:
$('#element').jScrollPane({
contentWidth: '0px'
});
SławekWala(contentWidth: '0px'
)は本当に魔法の杖です:)
IE8では、不要な水平スクロールバーが弾性コンテナに表示されることがよくあります。しかし、それは問題の一部にすぎません。水平スクロールバーが表示されたときコンテンツは垂直ガターとスクロールバーの両方からオーバーフローします。
したがって、(他の回答が示唆しているように)水平スクロールバーを無効にして非表示にした場合、問題の2番目の部分が残ります。
contentWidth: '0px'
両方の症状を修正します。
ただし、knowncitizenは正しかったのですが、contentWidthはintegerプロパティ(btw contentWidth: 'foo'
同じきれいな結果が得られます)。
予測できない影響を回避するために、次のように正の数を使用できますが、十分に小さい数です。contentWidth: 1
これはかなり時代遅れの質問です。しかし、誰かがあなたと私と同じ問題を抱えている場合:
これを実現するためのプロパティやAPI呼び出しが見つからなかったため、CSSで無効にした簡単なソリューションを使用しました。
.jspHorizontalBar { display: none !important; }
あまりエレガントな方法ではありませんが、jScrollPaneコードを調査または「ハッキング」する時間を節約できました。
パス horizontalDragMaxWidth: 0
オプションに。
ここではどのソリューションも機能しなかったので、ネストされた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>
私はCSSを使用してこれを達成することができました。
親はクラスhorizontal-only
を持つ必要があるため、水平バーのみが必要な場合は、クラスjspVerticalBar
を子として追加し、horizontal-only
クラスの下にのみ表示されるようにしました。表示されません。同じページに垂直方向と水平方向を設定した場合でも機能します。
div.horizontal-only .jspVerticalBar { display:none; }
他の答えを試して失敗した後、これを機能させるために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', '');
それがどれほど安全かはわかりませんが、それは私たちにとってはうまくいきます。
私にとって最善の解決策は、CSSのクラスleft: 0 !important;
と.customSelect
に.jspPane
を追加することでした。
.customSelect .jspPane {
overflow-x: hidden;
left: 0 !important;
}