CSS vertikale Bildlaufleiste Padding links/rechts in UL möglich?

Ist es möglich, Padding oder Rand um das Scrollbar-Element oder Scrollbar-Track hinzuzufügen? Ich habe es versucht und kann nur oben/unten gepolstert werden. Das Hinzufügen von Padding zum UL hat keinen Einfluss auf die Bildlaufleiste. Negative Ränder in der Bildlaufleiste haben keine Auswirkungen. Ideen? JS Fiddle here.CSS vertikale Bildlaufleiste Padding links/rechts in UL möglich?

::-webkit-scrollbar { 
width: 12px; 
margin:10px; 
} 

::-webkit-scrollbar-track { 
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
-webkit-border-radius: 10px; 
border-radius: 10px; 
padding: 10px 
} 

::-webkit-scrollbar-thumb { 
-webkit-border-radius: 10px; 
border-radius: 10px; 
background: rgba(255,0,0,0.8); 
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 
::-webkit-scrollbar-thumb:window-inactive { 
background: rgba(255,0,0,0.4);

Quelle

2014-02-10 sandraqu

Sie können ein Beispiel da drüben (http://jsfiddle.net/6KprJ/1/) sehen, die im Grunde vergessen, dass es das Hinzufügen Marge oder Polstern, erhöhen nur die Breite/Höhe der Scroll-Bereich, und verringern Sie die Breite Höhe Faust/Spur.

von how to customise custom scroll?

::-webkit-scrollbar { 
    width: 14px; 
    height: 18px; 
} 
::-webkit-scrollbar-thumb { 
    height: 6px; 
    border: 4px solid rgba(0, 0, 0, 0); 
    background-clip: padding-box; 
    -webkit-border-radius: 7px; 
    background-color: rgba(0, 0, 0, 0.15); 
    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05); 
} 
::-webkit-scrollbar-button { 
    width: 0; 
    height: 0; 
    display: none; 
} 
::-webkit-scrollbar-corner { 
    background-color: transparent; 
}

Quelle

2014-02-10 17:50:18

Ah clever ... Danke –

Für alle fragen sich, hier die Magie ist 'background-clip: padding-box', die die Grenze des Elements verursacht abgeschnitten werden (zusammen mit der Hintergrundfarbe unter ihm), indem Sie den Rand auf eine vollständig transparente Farbe setzen, wird ein Padding-Effekt erzeugt, der der Breite des Randes entspricht. Ohne diese Regel wäre die Hintergrundfarbe durch den Rand sichtbar. – SeinopSys

bizarrerweise funktioniert das nicht, wenn Sie die Lücke vergrößern, die Breite vergrößern und die runden Ränder beibehalten möchten. Irgendwelche Tipps? – tatsu

Zitat Dieser Lösung einen echten Raum zwischen Inhalt und scrollbar machen (wenn ein rollbaren Element nicht einen transparenten Hintergrund hat). Nützlich für Fenster Bildlaufleisten.

.scroll {overflow:auto;} 
.scroll::-webkit-scrollbar { 
    width:16px; 
    height:16px; 
    background:inherit; 
} 
.scroll::-webkit-scrollbar-track:vertical { 
    border-right:8px solid rgba(0,0,0,.2); 
} 
.scroll::-webkit-scrollbar-thumb:vertical { 
    border-right:8px solid rgba(255,255,255,.2); 
} 
.scroll::-webkit-scrollbar-track:horizontal { 
    border-bottom:8px solid rgba(0,0,0,.2); 
} 
.scroll::-webkit-scrollbar-thumb:horizontal { 
    border-bottom:8px solid rgba(255,255,255,.2); 
} 
.scroll::-webkit-scrollbar-corner, 
    .scroll::-webkit-resizer {background:inherit; 
    border-right:8px solid rgba(255,255,255,.2); //optional 
    border-bottom:8px solid rgba(255,255,255,.2); //optional 
}

Quelle

2016-02-17 15:02:36

CSS vertikale Bildlaufleiste Padding links/rechts in UL möglich?

Antwort

Verwandte Themen