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