Как получить полосу прокрутки для отображения на моем 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> 

Есть обычно больше вариантов, чем есть место на экране, чтобы показать, что это хорошо - как правило, есть способ прокрутки. Тем не менее, когда я добавить Div контейнер в центр все ...

<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> 

с этим стилем

#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%); 
} 

Но теперь нет никакого способа для прокрутки. Вот мой 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, которое является произвольно выбранным множителем для любого числа, как вы сочтете нужным. Вы также можете использовать rem вместо em, но вам придется принять это решение самостоятельно, в зависимости от вашего окончательного желаемого варианта использования. Если вы измените определение 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 Fiddle: https://jsfiddle.net/d2r50gc1/12/

Достигнутые с помощью следующего CSS:

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