• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wie erstelle ich folgende seitliche Scrollbar?

Tabula_Rasa

Mitglied
Nabend zusammen,

ich habe derzeit ein Problem mit overflow-Attribut.
Ich habe einen Default-Button und andere Buttons. Der Default-Button soll stets angezeigt werden, wobei die anderen Buttons, wenn sie denn 100% des restlichen Platzes einnehmen, seitlich scrollbar sein sollen, ohne dass die Scrollbar selbst angezeigt wird und der Default-Button und die anderen Buttons sollen auf derselben Ebene liegen.

Code:
<div class="user-defined-filters">
            <div class="default-filter">
                <button class="btn btn-secondary" (click)="filterOpened = !filterOpened">Default</button>
            </div>
            <div class="user-filters">
                <button *ngFor="let filtername of userDefinedFilterNames" class="btn btn-secondary" (click)="filterOpened = !filterOpened" (click)="applyUserDefinedFilter(filtername)"> {{filtername}} </button>
            </div>
        </div>

Der CSS-Code
Code:
.user-defined-filters{
    display: block;
    width: 100%;
}
.default-filter button, .user-filters button {
    padding: 7px;
    margin-right: 1rem;
}

.default-filter{
    display: inline-block;
    max-width: 25%;
}
.user-filters{
    display: inline-block;
    max-width: 75%;
    overflow-x: scroll;
}

Das Problem an dem CSS-Code ist, dass erstens die Button im <div class="user-filters"> nicht in einer Ebene mit dem Default-Button liegt und dass bei kleiner werdendem Bildschirm overflow-x: scroll; nicht greift. Die Button die nicht auf die Width passen, werden in der darauffolgenden Zeile angezeigt, was nicht erwünscht ist.

Wie bekomme ich folgendes hin:
1. Die Buttons sollen alle auf einer Ebene liegen
2. Der Default-Button steht für sich allein, die restlichen Buttons sollen sich in einem div-tag befinden, der scrollable ist, ohne dass die scrollbar selbst sichtbar ist.

Ist dieses Vorhaben möglich? Wenn ja, wie?
 
Werbung:
Es handelt sich um Angular. Ich poste mal das resultierende HTML und es können max. 11 Buttons sein. Das heißt, es sind immer zwischen 1-11 Buttons:

Code:
<div class="default-filter">
                <button class="btn btn-secondary">Default</button>
            </div>
            <div class="user-filters">
                <button  class="btn btn-secondary" > Button1</button>
              <button  class="btn btn-secondary" > Button2</button>
             <button  class="btn btn-secondary" > Button3</button>
               <button  class="btn btn-secondary" > Button4</button>
                <button  class="btn btn-secondary" > Button5</button>
            </div>
</div>

Ich möchte nun, dass der div-tag mit der Klasse user-filters scrollable wird mit unsichtbarer bzw. unauffälliger Scrollbar, wenn die Buttons mehr Platz einnehmen als in der Zeile verfügbar ist, ohne dass diese sich in irgendeiner Weise vom Aussehen ändern. Ich hatte davor etwas anderes probiert. Es kann sein, dass mein CSS-Code nicht verwendbar ist für mein Vorhaben.
Wie würde ich dieses Vorhaben mithilfe von CSS realisieren?
 
Werbung:
1. Wie sollen Besucher erkennen dass die Navigation scrollbar ist?

2. Wie soll gescrollt werden?
Zur ersten Frage: Gute Frage, ich denke eine unauffällige, dünne Scrollbar müsste doch schon hin, aber ich habe dann ein Problem und zwar den Default-Button auf dieselbe Ebene zu bringen wie die anderen, da die Scrollbar selbst Höhe einnimmt.

Zur zweiten Frage: ich dachte mir, dass man auf den div-tag klickt und nach links zieht, damit die anderen zuvor nicht sichtbaren Buttons von rechts nach Links in den sichtbaren Bereich gezogen werden und die ersten, am Anfang stehenden Buttons werden aus dem sichtbaren Bereich gezogen. Der Default-Button ist jedoch immer sichtbar. So habe ich mir das vorgestellt.
 
Bei deinem Beispiel ist das Problem, dass die Wörter auf die neue Zeile springen, wenn die Breite zu klein wird.
Das Aussehen soll sich nicht verändern. Es ändert sich nur der sichtbare Bereich. Ich lerne gerne dazu, wenn du ein Beispiel hättest, wäre ich dir sehr dankbar.
 
Werbung:
Wie würde man die Scrollbar verschwinden lassen und per Klick und nach links ziehen den Scrollvorgang imitieren?
Am besten garnicht. Wenn da kein Scrollbalken ist, geht der User nicht davon aus dass da irgendwas gescrollt werden kann (schon garnicht über klick und ziehen) - die Seite wäre also nicht mehr bedienbar. Lass den Scrollbalken so wie er ist, alles andere ist Unsinn.
 
Werbung:
Am besten garnicht. Wenn da kein Scrollbalken ist, geht der User nicht davon aus dass da irgendwas gescrollt werden kann (schon garnicht über klick und ziehen) - die Seite wäre also nicht mehr bedienbar. Lass den Scrollbalken so wie er ist, alles andere ist Unsinn.
Das stimmt schon, aber ich finde es persönlich schöner und ich denke wenn ein Teil des letzten Button abgeschnitten ist, wird der User schon merken, dass man scrollen kann. Ich schau nochmal, falls die Seite wirklich nicht mehr bedienbar sein sollte, werde ich das natürlich so machen wie du es sagst.
 
Auf der einen Seite hat das etwas für sich aber ich habe auch schon die entgegen gesetzte Situation erlebt: Bei einem Slider, der mit Klick auf Pfeile bedient wurde, wurde ich gefragt: "Warum kann ich denn da nicht einfach mit der Maus ziehen?" :D Heute steht bei vielen das Smartphone im Vordergrund und sie erwarten, dass die Bedienung am PC genau so funktionieren sollte.
Vielleicht lasse ich den Scrollbalken auf größeren Bildschirmen und verstecke ihn auf kleineren.
 
Das stimmt schon, aber ich finde es persönlich schöner […]
Stop. *Du* findest es vielleicht schöner - das ist hier aber irrelevant, die Seite ist schließlich nicht für dich sondern für deine User, die sind dir gegenüber in der Mehrheit … Und selbst wenn ein User bei einem halben Button versuchen würde zu "scrollen" (in Anführungszeichen da es nicht wie gewohnt geht): du kannst nie wissen/garantieren dass da ein halber Button zu sehen ist, jedes Display ist anders. Vom Thema Zugänglichkeit mal ganz zu schweigen …
 
Werbung:
Stop. *Du* findest es vielleicht schöner - das ist hier aber irrelevant, die Seite ist schließlich nicht für dich sondern für deine User, die sind dir gegenüber in der Mehrheit … Und selbst wenn ein User bei einem halben Button versuchen würde zu "scrollen" (in Anführungszeichen da es nicht wie gewohnt geht): du kannst nie wissen/garantieren dass da ein halber Button zu sehen ist, jedes Display ist anders. Vom Thema Zugänglichkeit mal ganz zu schweigen …
Stimmt. Ich müsste nochmal darüber nachdenken, wie ich das mache.
 
Zurück
Oben