DIVに同時にスクロールバーを表示させるにはどうすればよいですか？

Question

私は順不同リストをスタイリングしています、その構造は

<div class="select-styled active">Arizona</div><ul class="select-options" style="display: block;"><li rel="">Select State</li><li rel="3526">Alabama</li><li rel="3556">Alaska</li><li rel="3547">Arizona</li><li rel="3510">Arkansas</li><li rel="3542">California</li>…<li rel="3554">Wyoming</li></ul></div> 

が細かい表示する画面、上の部屋がありますよりも、通常より多くのオプションがありますです - 通常スクロールする方法があります。しかし、私はこのスタイル

#profileContainer { 
    border-radius: 25px; 
    background: #ffffff; 
    padding: 10px; 
    width: 100%; 
    max-width: 720px; 
    display: inline-block; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

で

<div id="profileContainer"> 
<div class="profileField address"> 
<div class="select-styled active">Arizona</div><ul class="select-options" style="display: block;"><li rel="">Select State</li><li rel="3526">Alabama</li><li rel="3556">Alaska</li><li rel="3547">Arizona</li><li rel="3510">Arkansas</li><li rel="3542">California</li>…<li rel="3554">Wyoming</li></ul></div> 
</div> 
</div> 

...すべてのものを中心にのdivコンテナを追加します。しかし、今にスクロールする方法はありません。ここに私のJSFiddle - https://jsfiddle.net/d2r50gc1/があります。アイテムを画面中央に配置するにはどうすればいいですか？また、順序付けられていないリストにスクロールバーを置くことで、すべてのアイテムを表示できますか？

Answer 1

は、私はあなたが欲しいものを達成したと思う：https://jsfiddle.net/d2r50gc1/11/

あなたは順不同リストにいくつかのスタイルを適用するだけです：

ul.select-options { 
    max-height: 15em; 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 

をem（またはrem）を使用することによりユニットの代わりにpxの場合、別の回答のコメントに興味を示したことを指摘したフォントサイズを変更することを選択したユーザーのサポートは維持されます。任意に選択した乗数である15emを任意の数に変更することができます。 emの代わりにremを使用することも考えられますが、最終的に必要なユースケースに応じて、自分で決定する必要があります。 paddingの定義を変更してemまたはremも使用する場合は、数式を使用して、ドロップダウンに常に一定数の要素を表示するようにサイズを設定できます。

Answer 2

私はちょうど

あなたjsfiddle

を更新あなたは自分の#profileContainer

Update

うまくいけば、これはあなたを助けに高さとオーバーフローを追加する必要があります。

Answer 3

お客様のご要望に応じてJSFiddleがあります。

.select { 
    overflow: auto; 
    overflow-x: hidden; 
    overflow-y: scroll; 
    -webkit-transform: translateX(calc(50% + 110px)); 
    transform: translateX(calc(50% + 110px)); 
} 

説明

私は.selectクラスにオーバーフローを追加し、それを中央に変換する使用。これがあなたのニーズを満たすことを願っています。

Answer 4

私はあなたが求めていることを理解していると思うようになりました。私はあなたが私の他の答えを最初に見直すことを心から奨励します、私はあなたがそれがはるかに優れた選択肢であると思うと思います。

スクロールdiv。profileFieldフィドル：以下CSSで実現https://jsfiddle.net/d2r50gc1/12/

：

div.profileField { 
    width: 100%; 
    height: 100%; 
    overflow-y: scroll; 
    overflow-x: hidden; 
    box-sizing: border-box; 
} 

Answer 5

ますが、別のセンタリング方法を探すこの

.select-options{ height:60%; overflow-x: hidden;} Add this properties in same class 

Demo