Wie bekomme ich eine Bildlaufleiste, die auf meinem DIV erscheint und gleichzeitig auf meinem Bildschirm zentriert wird?

Question

Ich bin eine ungeordnete Liste Styling, deren Struktur ist

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

Es gibt in der Regel mehr Möglichkeiten als es Platz auf dem Bildschirm ist, angezeigt werden, die in Ordnung ist - in der Regel gibt es einen Weg zu blättern. Allerdings, wenn ich einen div Container hinzufügen alles zum Zentrum ...

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

mit diesem Stil

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

Aber jetzt gibt es keine Möglichkeit, zu blättern. Hier ist mein JSFiddle - https://jsfiddle.net/d2r50gc1/. Wie kann ich meine Objekte in der Mitte des Bildschirms zentrieren und habe auch eine Bildlaufleiste auf der ungeordneten Liste, so dass ich alle Elemente sehen kann?

Answer 1

Ich glaube, ich habe erreicht, was Sie wollen: https://jsfiddle.net/d2r50gc1/11/

Alles, was Sie tun müssen, ist ein paar Stile auf die ungeordnete Liste anwenden:

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

Durch die Verwendung von em (oder rem) Einheiten statt von px Sie behalten Unterstützung für Benutzer, die ihre Schriftgröße ändern, die ich bemerkte, dass Sie Interesse an den Kommentaren einer anderen Antwort ausdrückten. Sie können das 15em ändern, das ein willkürlich ausgewählter Multiplikator zu jeder Zahl ist, wie Sie für richtig halten. Sie könnten auch die Verwendung von rem anstelle von em in Erwägung ziehen, aber Sie müssen diese Entscheidung selbst treffen, abhängig von Ihrem endgültigen gewünschten Anwendungsfall. Wenn Sie die padding Definition ändern, um auch em oder rem zu verwenden, können Sie mit math die Größe so einstellen, dass immer eine bestimmte Anzahl von Elementen im Dropdown angezeigt wird.

Answer 2

ich Ihre jsfiddle gerade aktualisiert

Sie müssen nur die Höhe hinzuzufügen und den Überlauf zu Ihrem #profileContainer

Update

Hoffentlich Ihnen hilft.

Answer 3

Hier ist Ihre JSFiddle in Bezug auf Ihre Anforderungen.

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

Beschreibung

Ich habe Überlauf zur .select Klasse und dann dazu verwendet, die es zum Zentrum verwandeln. Hoffe das entspricht Ihren Bedürfnissen.

Answer 4

Hinzufügen einer zweiten Antwort jetzt, dass ich denke, ich verstehe, was Sie verlangen. Ich ermutige Sie aufrichtig, meine andere Antwort zuerst zu überprüfen, ich denke, Sie werden feststellen, dass es eine weit überlegene Option ist.

Scrollen Div.profileField Fiddle: https://jsfiddle.net/d2r50gc1/12/

mit folgendem CSS Erreicht:

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

Answer 5

Sind Sie erreicht etwas versuchen, wie diese

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

Demo