Wie erstelle ich folgende seitliche Scrollbar?

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

Tabula_Rasa

Mitglied
12 Mai 2017
249
2
18
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?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.105
408
83
67
Wenn ich das HTML sehe, verstehe ich nur Bahnhof: Ist das ein Template o. ä.? Poste besser das resultierende HTML aus dem HTML-Inspektor deines Browsers. Oder die URL der Seite.
Aber auch ohne das denke ich, dass die Ursache für den Zeilenumbruch ist, dass Du dem äußeren Container eine Breite von 100% gegeben hast. Dann können die Buttons nicht anders als umzubrechen, wenn sie nicht mehr hinein passen.
Handelt es sich um genau 4 Buttons, weil Du ihnen eine max. Breite von 25% gegeben hast? Dann ist der Grund, dass die Breite von 25% die Breite ohne Padding, Border und Margin ist, so dass sie nicht hinein passen. Wenn Du sie mit Fleylayout anordnest entfällt dieses Problem und auch die vertikale Ausrichtung sollte kein Problem sein.
 
  • Like
Reaktionen: Tabula_Rasa

Tabula_Rasa

Mitglied
12 Mai 2017
249
2
18
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?
 

Tabula_Rasa

Mitglied
12 Mai 2017
249
2
18
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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.105
408
83
67
Ich dachte zunächst, Du möchtest eine Standard-Scrollbar wie sie der Browser fest legt wenn man overflow: auto; definiert. Das könnte man relativ einfach mit diesem CSS erreichen:
Code:
    <style>
        #outer-cont {
            display: flex;
            width: 100%;
            flex-wrap: nowrap;
        }
        div.user-filters {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
        }
    </style>
    <div id="outer-cont">
        <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>
Wenn Du durch Ziehen mit der Maus auf dem div selber scrollen willst, wird es etwas komplexer.
 
  • Like
Reaktionen: Tabula_Rasa

Tabula_Rasa

Mitglied
12 Mai 2017
249
2
18
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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.105
408
83
67
Ich schrieb schon, dass es dann etwas komplexer wird. Eine Möglichkeit wäre, Swiper einzusetzen, das ist sehr vielfältig konfigurierbar und kann auch in React integriert werden:
Standardmäßig rasten die Elemente beim Scrollen ein aber unter den Demos findest Du auch einen "free mode", bei dem das nicht der Fall ist. Und eine schmale Scrollbar, von der Du geschrieben hast, ist auch machbar. Touch-Bedienung wird unterstützt.
 
  • Like
Reaktionen: Tabula_Rasa

tk1234

Mitglied
2 September 2020
49
10
8
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.
 
  • Like
Reaktionen: Tabula_Rasa

Tabula_Rasa

Mitglied
12 Mai 2017
249
2
18
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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.105
408
83
67
tk123 schrieb:
Wenn da kein Scrollbalken ist, geht der User nicht davon aus dass da irgendwas gescrollt werden kann (schon garnicht über klick und ziehen)
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.
 
  • Like
Reaktionen: Tabula_Rasa

Tabula_Rasa

Mitglied
12 Mai 2017
249
2
18
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.
 

tk1234

Mitglied
2 September 2020
49
10
8
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 …
 
  • Like
Reaktionen: Tabula_Rasa

Tabula_Rasa

Mitglied
12 Mai 2017
249
2
18
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.