ändern Styling wenn div ist scrollbaren

Da Scrollbalken oft unsichtbar sind, würde Ich mag eine visuelle Anzeige haben, wenn ein div scrollbaren ist (dies ist für bestimmte Dinge auf mobilen ist, dass der Bildschirm horizontal überlaufen würde)ändern Styling wenn div ist scrollbaren

Ich bin nicht sicher, wie man dies mit CSS erreichen kann, jedoch Ich erinnere mich daran, dies in einem Artikel vor ein paar Jahren zu sehen, so denke ich, dass es möglich ist, was möglicherweise als "Hack" oder Verwendung einer ziemlich obskuren Eigenschaft beschrieben werden könnte.

<style> 
.scroll-y { 
    overflow-y: auto; 
} 
.scroll-y::overflowing-y { /* not real */ 
    background: linear-gradient(90deg, transparent 90%, rgba(120,120,120,.4)); 
} 
</style> 
<div class="scroll-y"></div>

Quelle

2017-11-14 Damon

Sie könnten wahrscheinlich etwas für Webkit mit '-webkit-scrollbar' Pseudo-Elementen tun, aber ich glaube nicht, dass es eine CSS-Lösung gibt, um übergelaufene Inhalte zu erkennen. Würde wahrscheinlich eine Javascript-Lösung benötigen, um alle Browser abzudecken. –

Nein, das ausdrücklich und bewusst in CSS unmöglich gemacht:

https://wiki.csswg.org/faq#selectors-that-depend-on-layout

weil Stilen auf rollbaren Zustand der <div> Basis angewandt Layout in einer Art und Weise beeinflussen könnte, das macht die <div> groß genug nicht scrollbar sein, was zu einer Endlosschleife führt.

Quelle

2018-02-08 05:28:30 Kornel

Das macht sehr viel Sinn .. obwohl ich schwöre, ich sah eine Art von hacky Art, einen Gradienten am Rande von scrollbaren Inhalten mit einer seltsamen Kombination von Selektoren zu zeigen .. wahrscheinlich eine: nach so würde es nicht das Styling beeinflussen das Hauptelement – Damon

Eines Tages werde ich es wieder finden ... – Damon

Sie können einen Farbverlauf über die untere Kante eines Elements legen. Die einzige Einschränkung ist, dass bei reinem CSS der Gradient immer da ist, egal ob das Element überläuft oder nicht. Es kann nicht sofort auffallen, wenn Sie es z.B. weiß auf weiß. – Kornel

Kornel ist richtig, dass dies mit CSS im Allgemeinen nicht möglich ist, aber es kann in bestimmten Situationen "gefälscht" werden.

This post by Lea Verou erläutert eine Methode, die zwei Hintergründe verwendet, einen, der mit dem Inhalt scrollt, und einen, der dies nicht tut, so dass bei Überlagerung derselbe Hintergrund erscheint. Die "Illusion" funktioniert nur, wenn die Hintergrundfarbe fest ist. Hier

ist der Code von Leas Artikel:

.scrollbox { 
    overflow: auto; 
    width: 200px; 
    max-height: 200px; 
    margin: 50px auto; 

    background: 
     /* Shadow covers */ 
     linear-gradient(white 30%, rgba(255,255,255,0)), 
     linear-gradient(rgba(255,255,255,0), white 70%) 0 100%, 

     /* Shadows */ 
     radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)), 
     radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%; 
    background: 
     /* Shadow covers */ 
     linear-gradient(white 30%, rgba(255,255,255,0)), 
     linear-gradient(rgba(255,255,255,0), white 70%) 0 100%, 

     /* Shadows */ 
     radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)), 
     radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%; 
    background-repeat: no-repeat; 
    background-color: white; 
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px; 

    /* Opera doesn't support this in the shorthand */ 
    background-attachment: local, local, scroll, scroll; 
}

Es gibt auch this Codepen which also contains links to a few related resources.

Quelle

2018-02-12 14:53:42 Damon

ändern Styling wenn div ist scrollbaren

Antwort

Verwandte Themen