2016-07-08 6 views
6

コンテンツが追加または削除されるとオーバーフローするdivがあります。スクロールバー用のHTML予約領域

しかし、UIデザイナーは、表示されているが非アクティブなスクロールバー(overflow: scrollのように)を必要とせず、コンテンツレイアウトを追加して削除するときに変更する必要はありません(overflow: auto)。

この動作を取得し、さまざまなプラットフォームやブラウザで異なるスクロールバーを使用する方法がありますか?下の意志柔らかい問題で

enter image description here https://jsfiddle.net/qy9a2r00/1/

+2

ネイティブスクロールバーを交換するためのプラグインがありますが、JavaScriptを使用することを意味します。 – Stickers

+1

http://manos.malihu.gr/jquery-custom-content-scroller/こちらの例を参考にしてください:http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html – Suresh

答えて

0

一つは、HTMLのみ& CSSを使用して、スクロールバーがどのように厚い知ることができないので、(青)プレースホルダのwidthを知りません。

このようなタスクは、スクリプトを使用して解決できます。隠しコンテナ内のスクロールバーを強制し、内側と外側の幅を測定します。違いはスクロールバーの幅です。この幅をプレースホルダ要素に設定します(CSSなど)。そしてトリッキーな部分では、スクロールバーが表示されるたびにこの要素を非表示にします。

この問題の通常の解決方法は、あなたが望まないものです。

+0

「自動」または「スクロール」スタイルで生活している通常のソリューションは、スクラッチバー全体をゼロから置き換えるか、JSを使ってスクロールバーを測定し、追加したり削除したりして青を調整できますバースタイル? –

1

これを行う唯一の方法は、コンテナ内のアイテムの幅を固定することです。そしてスクロールバーの幅を控えめにしなければなりません。

.container { 
     width: 200px; 
     height: 200px; 
     overflow: auto; 
     overflow-x: hidden; 
     border: 1px solid black; 
    } 
    .item { 
     width: 200px; 
... 

https://jsfiddle.net/fr1jnmn6/1/

関連する問題