machen attraktive Scrollbar kompatibel mit allen Browsern

Question

Ich entwickle Chat-und Anruf-Anwendung in meinem Projekt.

So gibt es 3 Registerkarten.

1. Menschen
2. Dialer halten, um bestimmte Person
3. Chat/Anrufverlauf

in dieser Tabs gibt es 3 Portionen zu wählen.

1. header
2. Chat/Anruf/Geschichte Teil.
3. Registerkarte Wechsler Navigator.

Ich mache den mittleren Teil scrollbar.

Ich möchte diese Bildlaufleiste dünner machen. Ich möchte die Standard-Bildlaufleiste des Browsers nicht verwenden.

Dafür finde ich ":: - webkit-scrollbar" das ist perfekt nur für Chrom.

Ich möchte diese CSS auf alle Browser anwenden.

Ich finde Scroll-Plugins, aber ich möchte kein externes Plugin verwenden. Ich möchte das mit jquery/css/javascript lösen.

Gibt es eine Eigenschaft oder irgendetwas, das mein Problem lösen kann?

Answer 1

Das ::webkit-scrollbar Pseudo-Element ist NICHT-Standard und es gibt keine Möglichkeit, dies im Moment browserübergreifend zu machen. Es gibt gute Gründe, warum dies noch nicht als Standard entwickelt wurde. Stellen Sie sich einige Touch-Geräte mit Browsern ohne Bildlaufleisten oder Bildlaufleisten vor, die standardmäßig ausgeblendet sind und nur beim Scrollen angezeigt werden (um wertvollen Platz zu sparen). Custom-Styling müsste all diese Anwendungsfälle anpassen.

Daher würde ich generell empfehlen, die Browser-Bildlaufleiste nicht mit diesem Hack zu stylen. Wenn Sie wirklich eine Lösung benötigen, können Sie versuchen jquery.scrollbar. IMHO ist dies jedoch keine robuste Lösung. Es beruht ausschließlich auf JavaScript und wackelt auf einigen Geräten.

bearbeiten: Weitere Informationen über MDN