CSS angepasste Bildlaufleiste in div

327

Wie kann ich eine Bildlaufleiste über CSS (Cascading Style Sheets) für eine divund nicht für die gesamte Seite anpassen ?

css html scrollbar harisdev
quelle
Bewerben Sie sich overflow:auto;einfach darauf <div>. Noch mehr Hintergrundinformationen?
Rob W
Ich habe das getan, aber ich brauche benutzerdefinierte Bildlaufleiste, ähm .. Design der Bildlaufleiste
Harisdev
Freiwählbare Farbe? Dies wird nur im Internet Explorer und nicht in anderen modernen Browsern unterstützt. Dies kann mit reinem CSS nicht erreicht werden.
Rob W
1
Einfachste JS-Lösung (CSS hat keine browserübergreifende Unterstützung) - yaireo.github.io/fakescroll
vsync
Siehe meine Antwort hier: stackoverflow.com/questions/7357203/custom-scrollbars/…
Buzinas

Antworten:

688

Ich dachte, es wäre hilfreich, die neuesten Informationen zu Bildlaufleisten, CSS und Browserkompatibilität zu konsolidieren.

Bildlaufleiste CSS-Unterstützung

Derzeit gibt es keine browserübergreifenden CSS-Stildefinitionen für die Bildlaufleiste. Der W3C-Artikel, den ich am Ende erwähne, enthält die folgende Aussage und wurde kürzlich aktualisiert (10. Oktober 2014):

Einige Browser (IE, Konqueror) unterstützen die nicht standardmäßigen Eigenschaften "Bildlaufleisten-Schattenfarbe", "Bildlaufleisten-Spurfarbe" und andere. Diese Eigenschaften sind unzulässig: Sie sind weder in einer CSS-Spezifikation definiert noch als proprietär gekennzeichnet (indem ihnen "-vendor-" vorangestellt wird).

Microsoft

Wie bereits erwähnt, unterstützt Microsoft das Styling von Bildlaufleisten, jedoch nur für IE8 und höher.

Beispiel:

<!-- language: lang-css -->

    .TA {
        scrollbar-3dlight-color:gold;
        scrollbar-arrow-color:blue;
        scrollbar-base-color:;
        scrollbar-darkshadow-color:blue;
        scrollbar-face-color:;
        scrollbar-highlight-color:;
        scrollbar-shadow-color:
    }

Chrome & Safari (WebKit)

Ebenso hat WebKit jetzt eine eigene Version:

Firefox (Gecko)

Ab Version 64 unterstützt Firefox die Gestaltung von Bildlaufleisten durch die Eigenschaften scrollbar-color(teilweise W3C-Entwurf ) und scrollbar-width( W3C-Entwurf ). Einige gute Informationen zur Implementierung finden Sie in dieser Antwort .

Browserübergreifende Gestaltung der Bildlaufleiste

JavaScript-Bibliotheken und Plug-Ins können eine browserübergreifende Lösung bieten. Es gibt viele Möglichkeiten.

Die Liste könnte weitergehen. Am besten suchen, recherchieren und testen Sie die verfügbaren Lösungen. Ich bin sicher, dass Sie etwas finden werden, das Ihren Bedürfnissen entspricht.

Verhindern Sie das illegale Styling der Bildlaufleiste

Nur für den Fall, dass Sie ein Bildlaufleisten-Styling verhindern möchten, dem nicht "-vendor" vorangestellt wurde, enthält dieser Artikel bei W3C einige grundlegende Anweisungen . Grundsätzlich müssen Sie einem Benutzer-Stylesheet, das Ihrem Browser zugeordnet ist, das folgende CSS hinzufügen. Diese Definitionen überschreiben ungültige Bildlaufleisten auf jeder Seite, die Sie besuchen.

body, html {
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-3dlight-color: ThreeDLightShadow !important;
  scrollbar-darkshadow-color: ThreeDDarkShadow !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}

Doppelte oder ähnliche Fragen / Quelle, die oben nicht verlinkt sind

Hinweis: Diese Antwort enthält Informationen aus verschiedenen Quellen. Wenn eine Quelle verwendet wurde, wird diese auch in dieser Antwort verlinkt.

JSuar
quelle
227
Das Web gibt es seit über zwei Jahrzehnten, und es gibt immer noch keine Standardmethode zum Stylen von Bildlaufleisten. Zwanzig Jahre Normungsausschüsse bemerken nicht, dass Menschen Dinge scrollen. Es gibt keine Rate langsamen, sarkastischen Klatschens, die angemessen ausdrücken würde, wie ich mich dabei fühle. Aber eine Verzögerung von 20 Jahren zwischen dem ersten und dem zweiten Klatschen wäre meiner Meinung nach angemessen. Aus irgendeinem Grund war ich noch nicht geboren, als das WWW herauskam, und jetzt bin ich Computeringenieur. Gut gemacht, W3C.
Parthian Shot
3
Nur um meine zwei Cent hinzuzufügen: Google Mail und Youtube haben die Bildlaufleiste in Chrome und die native in Explorer und Firefox stilisiert. Wenn diese Standards gut genug für sie sind, ist es auch gut genug für mich
yonatanmn
9
@ PaulD.Waite Na ja, vielleicht, aber das kann auf alles angewendet werden. Und CSS existiert genau als Sprache, damit Designer die Standardeinstellungen überschreiben können. Die ganze Idee ist, dass ein schlechter UI-Designer jedes Element unintuitiv machen kann. Wenn Sie jedoch davon ausgehen, dass der Site-Designer inkompetent ist, was bringt es, überhaupt eine Seitenanpassung zuzulassen?
Parthian Shot
6
@ PaulD.Waite Klar, das ist nicht eines dieser Dinge. Zum einen, weil es sich um den Bereich des Bildschirms handelt, den der Site-Designer ohnehin vollständig kontrollieren sollte, sodass kein Sicherheitsrisiko besteht, und zum anderen, weil es in der Praxis eindeutig kein Problem darstellt. Viele Websites implementieren ihre eigenen Hacks, um Dinge zu erstellen, die wie Bildlaufleisten aussehen und sich verhalten, und sie funktionieren einwandfrei. Sie funktionieren nicht nur gut und sehen besser aus, sondern die Leute verstehen auch, wie man sie benutzt, worum es geht. Leider, weil sie Hacks sind, spielen sie manchmal nicht gut mit Dingen wie Druckfunktionen.
Parthian Shot
5
Diese Antwort geht nicht vollständig auf seine Frage ein, wie Bildlaufleistenstile auf ein bestimmtes Div und nicht auf eine ganze Seite angewendet werden sollen.
Stewart
14

Probieren Sie es aus

Quelle: https://nicescroll.areaaperta.com/

Einfache Implementierung 

<script type="text/javascript">
 $(document).ready(

  function() { 

    $("html").niceScroll();

  }

);
</script>

Es handelt sich um eine Bildlaufleiste des jQuery-Plugins, sodass Ihre Bildlaufleisten steuerbar sind und in den verschiedenen Betriebssystemen gleich aussehen.

Dilusha Gonagala
quelle
Ich bin sicher, dass es wahrscheinlich anpassbar ist, aber die Demo auf ihrer Seite scrollt viel zu langsam und die Bildlaufleiste ist viel zu schwer zu greifen.
Gans
4
Wie praktisch alle jQuery-Plugins - [shudders] - ist dies im Vergleich zu nativen, GPU-beschleunigten Scroll-Implementierungen mit Threading äußerst langsam. Völlig ungeeignet für ernsthafte Anwendungen und ein Hindernis für eine gute UX. Ich würde empfehlen, dies zu vermeiden, es sei denn, es handelt sich um eine Spielzeug-Website.
John Weisz
2
Ich hasse es, wenn Leute etwas reines Javascript nennen, dann BAM! ein jquery Plugin.
Dinh Tran
Ich würde die Verwendung von nicescroll nicht empfehlen, da dadurch die Browserfunktion deaktiviert wird. Das Scrollen mit dem mittleren Klick funktioniert nicht mit Nicescroll.
Aloso
Ich liebe dieses niceScroll, es fügt keinen Wrapper div um das Element hinzu, was bedeutet, dass es die HTML-Struktur nicht zerstört
datdinhquoc
11

Benutzerdefinierte Bildlaufleisten sind mit CSS nicht möglich. Sie benötigen etwas JavaScript-Magie.

Einige Browser unterstützen nicht spezifizierte CSS-Regeln, wie z. B. ::-webkit-scrollbarin Webkit, sind jedoch nicht ideal, da sie nur in Webkit funktionieren. IE hatte so etwas auch, aber ich glaube nicht, dass sie es mehr unterstützen.

elclanrs
quelle
2
veraltete Antwort
T.Todua
1
@ T.Todua Was ist an dieser Antwort veraltet?
Kojow7
6

Wie viele Menschen suchte ich nach etwas, das war:

  • In den meisten modernen Browsern einheitlich gestaltet und funktionsfähig
  • Nicht irgendeine lächerliche aufgeblähte jQuery-Erweiterung cr * p mit 3000 Zeilen

... aber leider nichts!

Nun, wenn sich ein Job lohnt ... Ich konnte in etwa 30 Minuten etwas zum Laufen bringen. Haftungsausschluss: Es gibt einige bekannte (und wahrscheinlich noch unbekannte) Probleme, aber ich frage mich, wofür in aller Welt die anderen 2920 JS-Zeilen in vielen Angeboten da sind!

var dragParams;
	window.addEventListener('load', init_myscroll);

	/* TODO: Much to do for v axis! */

	function bardrag_mousemove(e) {
	  var pos = (e.clientX - dragParams.clientX) + dragParams.offsetLeft;
	  pos = Math.min(Math.max(0, pos), dragParams.maxLeft);
	  dragParams.slider.style.left = pos + 'px';
	  updateScrollPosition(dragParams.slider, pos);
	}

	function updateScrollPosition(slider, offsetVal) {
	  var bar = slider.parentNode;
	  var myscroll = bar.parentNode;
	  var maxView = myscroll.scrollWidth - myscroll.offsetWidth;
	  var maxSlide = bar.offsetWidth - slider.offsetWidth;
	  var viewX = maxView * offsetVal / maxSlide;
	  myscroll.scrollLeft = viewX;
	  bar.style.left = viewX + 'px';
	}

	function drag_start(e) {
	  var slider = e.target;
	  var maxLeft = slider.parentNode.offsetWidth - slider.offsetWidth;
	  dragParams = {
	    clientX: e.clientX,
	    offsetLeft: slider.offsetLeft,
	    slider: e.target,
	    maxLeft: maxLeft
	  };
	  e.preventDefault();
	  document.addEventListener('mousemove', bardrag_mousemove);
	}

	function drag_end(e) {
	  e.stopPropagation();
	  document.removeEventListener('mousemove', bardrag_mousemove);
	}

	function bar_clicked(e) {
	  var bar = e.target;
	  var slider = bar.getElementsByClassName('slider')[0];
	  if (bar.className == 'h bar') {
	    var maxSlide = bar.offsetWidth - slider.offsetWidth;
	    var sliderX = e.offsetX - (slider.offsetWidth / 2);
	    sliderX = Math.max(0, Math.min(sliderX, maxSlide));
	    slider.style.left = sliderX + 'px';
	    updateScrollPosition(slider, sliderX);
	  }
	}

	function init_myscroll() {
	  var myscrolls = document.getElementsByClassName('container');
	  for (var i = 0; i < myscrolls.length; i++) {
	    var myscroll = myscrolls[i];
	    var style = window.getComputedStyle(myscroll);
	    if (style.overflowY == 'scroll' || (style.overflowY == 'auto' && myscroll.offsetHeight < myscroll.scrollHeight)) {
	      addScroller(false, myscroll);
	    }
	    if (style.overflowX == 'scroll' || (style.overflowX == 'auto' && myscroll.offsetWidth < myscroll.scrollWidth)) {
	      addScroller(true, myscroll);
	    }
	  }
	}

	function addScroller(isX, myscroll) {
	  myscroll.className += ' myscroll';
	  var bar = document.createElement('div');
	  var slider = document.createElement('div');
	  var offsetDim = isX ? myscroll.offsetWidth : myscroll.offsetHeight;
	  var scrollDim = isX ? myscroll.scrollWidth : myscroll.scrollHeight;
	  var sliderPx = Math.max(30, (offsetDim * offsetDim / scrollDim));
	  slider.style.width = 100 * sliderPx / offsetDim + '%';
	  slider.className = 'slider';
	  bar.className = isX ? 'h bar' : 'v bar';
	  bar.appendChild(slider);
	  myscroll.appendChild(bar);

	  bar.addEventListener('click', bar_clicked);
	  slider.addEventListener('mousedown', drag_start);
	  slider.addEventListener('mouseup', drag_end);
	  bar.addEventListener('mouseup', drag_end);
	  document.addEventListener('mouseup', drag_end);
	}
body {
  background-color: #66f;
}
.container {
  background-color: #fff;
  width: 50%;
  margin: auto;
  overflow: auto;
}
.container > div:first-of-type {
  width: 300%;
  height: 100px;
  background: linear-gradient(to right, red, yellow);
}
/* TODO: Much to do for v axis! */

.myscroll {
  overflow: hidden;
  position: relative;
}
.myscroll .bar {
  background-color: lightgrey;
  position: absolute;
}
.myscroll {
  padding-bottom: 20px;
}
.myscroll .h {
  height: 20px;
  width: 100%;
  bottom: 0;
  left: 0;
}
.myscroll .slider {
  background-color: grey;
  position: absolute;
}
.myscroll .h .slider {
  height: 100%;
}
<div class="container">
  <div></div>
</div>
Erweitern Sie das Snippet

ne1410s
quelle
1
Hintergrund: linearer Farbverlauf (rechts, rot, gelb);
xgqfrms
5

Ich habe viele Plugins ausprobiert, die meisten unterstützen nicht alle Browser. Ich bevorzuge iScroll und nanoScroller funktioniert für alle diese Browser:

  • IE11 -> IE6
  • IE10 - WP8
  • IE9 - WP7
  • IE Xbox One
  • IE Xbox 360
  • Google Chrome
  • Feuerfuchs
  • Oper
  • Safari

Aber iScroll funktioniert nicht mit Touch!

Demo iScroll : http://lab.cubiq.org/iscroll/examples/simple/
Demo nanoScroller : http://jamesflorentino.github.io/nanoScrollerJS/

Ouadie
quelle
Der Nano-Scroller unterstützt keinen horizontalen Scroll.
FlavorScape
Das Repo ist archiviert github.com/cubiq/iscroll Ich würde vorschlagen, nach anderen Alternativen zu suchen
Ouadie
5

Bitte überprüfen Sie diesen Link. Beispiel mit funktionierender Demo

   #style-1::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

CSS-Bildlaufleisten


quelle
2
Danke für die Demo. Ich habe es zuerst mit Firefox 58.0.2 (64-Bit, Windows 7 Pro / 64) ausgeführt und alle Bildlaufleisten waren identisch. Dann lief mit Chrome Version 65.0.3325.162 (Official Build) (64-Bit) und sie waren alle unterschiedlich. Sie haben also (möglicherweise unbeabsichtigt) die Grenzen des -webkit-Ansatzes aufgezeigt.
CODE-REaD
4

Die neue Version von Firefox (64) unterstützt das CSS-Bildlaufleistenmodul Level 1 

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}
<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</div>
Erweitern Sie das Snippet

Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

Firefox-Bildlaufleiste

https://codepen.io/fatihhayri/pen/pqdrbd

Fatih Hayrioğlu
quelle
3

Hier ist ein Webkit-Beispiel, das für Chrome und Safari funktioniert:

CSS:

::-webkit-scrollbar 
{
    width: 40px;
    background-color:#4F4F4F;
}

::-webkit-scrollbar-button:vertical:increment 
{
    height:40px;
    background-image: url(/Images/Scrollbar/decrement.png);
    background-size:39px 30px;
    background-repeat:no-repeat;
}

::-webkit-scrollbar-button:vertical:decrement 
{
    height:40px;
    background-image: url(/Images/Scrollbar/increment.png);    
    background-size:39px 30px;
    background-repeat:no-repeat;
}

Ausgabe:

Geben Sie hier die Bildbeschreibung ein

Verweigert Wessels
quelle
3 
.className::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(0,0,0,0);
}

.className::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}

gab mir ein schönes mobile / osx wie eines.

csomakk
quelle
1
Eine präzisere Antwort. IMHO beantwortete es tatsächlich die Frage des OP, wie man nur einen Div stylt. Nett.
Danimal Reks
2

Es gibt eine Möglichkeit, benutzerdefinierte Bildlaufleisten auf benutzerdefinierte div-Elemente in Ihren HTML-Dokumenten anzuwenden. Hier ist ein Beispiel, das hilft. https://codepen.io/adeelibr/pen/dKqZNb Aber als Kern davon. Sie können so etwas tun.

<div class="scrollbar" id="style-1">
  <div class="force-overflow"></div>
</div>

Die CSS-Datei sieht so aus.

.scrollbar
{
  margin-left: 30px;
  float: left;
  height: 300px;
  width: 65px;
  background: #F5F5F5;
  overflow-y: scroll;
  margin-bottom: 25px;
}

.force-overflow
{
  min-height: 450px;
}

#style-1::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
  width: 12px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #555;
}
Adeel Imran
quelle
2

Dies ist, was Google in einigen seiner Anwendungen seit langem verwendet. Sehen Sie im Code, dass beim Anwenden der nächsten Klassen die Bildlaufleiste in Chrome irgendwie ausgeblendet wird, dies jedoch weiterhin funktioniert.

Die Klassen sind jfk-scrollbar, jfk-scrollbar-borderlessundjfk-scrollbar-dark

.testg{ border:1px solid black;  max-height:150px;  overflow-y: scroll; overflow-x: hidden; width: 250px;}
.content{ height: 700px}

/* The google css code for scrollbars */
::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px
}
::-webkit-scrollbar-button {
    height: 0;
    width: 0
}
::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px
}
::-webkit-scrollbar-track:horizontal {
    border-width: 7px 0 0
}
::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}
::-webkit-scrollbar-track:active {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:active {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:horizontal {
    border-width: 7px 0 0;
    padding: 0 0 0 100px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .4);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}
::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .3);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:horizontal {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .6);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, .75);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .035);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .07);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless::-webkit-scrollbar-thumb:horizontal {
    border-width: 6px 0 1px
}
::-webkit-scrollbar-corner {
    background: transparent
}
body::-webkit-scrollbar-track-piece {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 0 0 0 3px;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-track-piece:horizontal {
    border-width: 3px 0 0;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body::-webkit-scrollbar-thumb {
    border-width: 1px 1px 1px 5px
}
body::-webkit-scrollbar-thumb:horizontal {
    border-width: 5px 1px 1px
}
body::-webkit-scrollbar-corner {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 3px 0 0 3px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}
.jfk-scrollbar::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px
}
.jfk-scrollbar::-webkit-scrollbar-button {
    height: 0;
    width: 0
}
.jfk-scrollbar::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
    border-width: 7px 0 0
}
.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}
.jfk-scrollbar::-webkit-scrollbar-track:active {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:active {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 7px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 7px 0 0;
    padding: 0 0 0 100px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .4);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}
.jfk-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .3);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, .6);
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37)
}
.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, .75);
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5)
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .035);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07)
}
.jfk-scrollbar-borderless.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover {
    background-color: rgba(255, 255, 255, .07);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15)
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb {
    border-width: 0 1px 0 6px
}
.jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 6px 0 1px
}
.jfk-scrollbar::-webkit-scrollbar-corner {
    background: transparent
}
body.jfk-scrollbar::-webkit-scrollbar-track-piece {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 0 0 0 3px;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}
body.jfk-scrollbar::-webkit-scrollbar-track-piece:horizontal {
    border-width: 3px 0 0;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}
body.jfk-scrollbar::-webkit-scrollbar-thumb {
    border-width: 1px 1px 1px 5px
}
body.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal {
    border-width: 5px 1px 1px
}
body.jfk-scrollbar::-webkit-scrollbar-corner {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 3px 0 0 3px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}
<div class="testg">
    <div class="content">
        Look Ma'  my scrollbars doesn't have arrows <br /><br />
        content, content, content <br /> content, content, content <br /> content, content, content s<br />  content, content, content <br/> content, content, content <br/> content, content, content d<br/>  content, content, content <br/> 
    </div>
</div>
<br/>
<div class="testg jfk-scrollbar jfk-scrollbar-borderless jfk-scrollbar-dark">
    <div class="content">
        Look Ma'  my scrollbars dissapear in chrome<br /><br />
        content, content, content <br /> content, content, content <br /> content, content, content s<br />  content, content, content <br/> content, content, content <br/> content, content, content d<br/>  content, content, content <br/> 
    </div>
</div>
Erweitern Sie das Snippet

http://jsfiddle.net/76kcuem0/32/

Ich fand es gerade nützlich, die Pfeile aus den Bildlaufleisten zu entfernen. Ab 2015 wird es in Google Maps verwendet, wenn nach Stellen in der Ergebnisliste in der Benutzeroberfläche für das Materialdesign gesucht wird.

le0diaz
quelle
1

Die Webkit-Bildlaufleiste wird von den meisten Browsern nicht unterstützt.

Unterstützt auf CHROM

Hier ist eine Demo für die Webkit-Bildlaufleiste Webkit-Bildlaufleiste DEMO

Wenn Sie nach weiteren Beispielen suchen, überprüfen Sie diese Weitere Beispiele

Eine andere Methode ist Jquery Scroll Bar Plugin

Es unterstützt alle Browser und ist einfach anzuwenden

Laden Sie das Plugin von Download Here herunter

Verwendung und für weitere Optionen PRÜFEN SIE DIESES

DEMO

Nikz
quelle
1

Ich habe viele JS- und CSS-Schriftrollen ausprobiert und fand, dass diese sehr einfach zu verwenden und auf IE, Safari und FF zu testen waren und gut funktionierten

AS @thebluefox schlägt vor

So funktioniert es

Fügen Sie das folgende Skript zum hinzu 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="facescroll.js"></script>

<script type="text/javascript">
    jQuery(function(){ // on page DOM load
        $('#demo1').alternateScroll();
        $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });  
    })
</script>

Und das hier in dem Absatz, in dem Sie scrollen müssen

<div id="demo1" style="width:300px; height:250px; padding:8px; resize:both; overflow:scroll">
**Your Paragraph Comes Here**
</div>

Weitere Details finden Sie auf der Plugin-Seite

FaceScroll Benutzerdefinierte Bildlaufleiste

ich hoffe es hilft

Yousef Altaf
quelle
0

Für Leute, die immer noch nach einer guten Lösung suchen, finde ich diese Plugin Simplebar heraus

Benutzerdefinierte Bildlaufleisten Vanille-Javascript-Bibliothek mit nativem Bildlauf, einfach, leicht, benutzerfreundlich und browserübergreifend.

In meinem Fall suchte ich nach ReactJS-Lösungen. Der Autor bietet auch Wrapper für React, Angular, Vue und die nächsten Beispiele

ManBearPig
quelle
0

Webkit-Browser (wie Chrome, Safari und Opera) unterstützen die nicht standardmäßige :: - Webkit-Bildlaufleiste , mit dem wir das Aussehen der Bildlaufleiste des Browsers ändern können.

Hinweis: Die :: - Webkit-Bildlaufleiste wird von Firefox oder IE und Edge nicht unterstützt.

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

div {
  width: 15rem;
  height: 8rem;
  padding: .5rem;
  border: 1px solid #aaa;
  margin-bottom: 1rem;
  overflow: auto;
}

.box::-webkit-scrollbar {
  width: .8em;
}

.box::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
 
.box::-webkit-scrollbar-thumb {
  background-color: dodgerblue;
}
<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>
Erweitern Sie das Snippet

Referenz: So erstellen Sie eine benutzerdefinierte Bildlaufleiste

Vishal
quelle
0

Angenommen, Sie haben das div als 

<div class="custom_scroll"> ... </div>

Wenden Sie CSS-Stile als an 

//custom scroll style definitions
.custom_scroll
{
  overflow-y: scroll;
}

//custom_scroll scrollbar styling
.custom_scroll::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    opacity: 0.5;
    //background-color: #F5F5F5;
}

.custom_scroll::-webkit-scrollbar
{
    width: 5px;
    opacity: 0.5;
    //background-color: #F5F5F5;
}

.custom_scroll::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    opacity: 0.5;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    //background-color: #555;
}

Der resultierende Bildlauf wird als angezeigt

Geben Sie hier die Bildbeschreibung ein

Saumyajit
quelle
-1

Oder verwenden Sie so etwas:

var MiniScroll=function(a,b){function e(){c.scrollUpdate()}function f(){var a=new Date,b=Math.abs(a-c.animation.frame),d=c.countScrollHeight();c.animation.frame=a,c.render(b),d.height!=c.controls.height&&(e(),c.controls.height=d.height),requestAnimationFrame(f)}function g(){c.scrollUpdate()}function h(a){var b=c.target.scrollTop,d=Math.abs(a.wheelDeltaY/(10-c.speed));c.target.scrollTop=a.wheelDeltaY>0?b-d:b+d,c.scrollUpdate()}function i(a){if(a.target.classList.contains("scroll"))return a.preventDefault(),!1;var b=c.countScrollHeight();c.target.scrollTop=a.offsetY*b.mul-parseInt(b.height)/2,c.scrollUpdate()}b=b||{};var c=this,d={speed:"speed"in b?b.speed:7};this.target=document.querySelector(a),this.animation={frame:new Date,stack:[]},this.identity="scroll"+parseInt(1e5*Math.random()),this.controls={place:null,scroll:null,height:0},this.speed=d.speed,this.target.style.overflow="hidden",this.draw(),requestAnimationFrame(f),this.target.onscroll=g,this.target.addEventListener("wheel",h),this.controls.place.onclick=i};MiniScroll.prototype.scrollUpdate=function(){this.controls.place.style.height=this.target.offsetHeight+"px";var a=this.countScrollHeight();this.controls.scroll.style.height=a.height,this.controls.scroll.style.top=a.top},MiniScroll.prototype.countScrollHeight=function(){for(var a=this.target.childNodes,b=parseInt(this.target.offsetHeight),c=0,d=0;d<a.length;d++)a[d].id!=this.identity&&(c+=parseInt(a[d].offsetHeight)||0);var e=this.target.offsetHeight*parseFloat(1/(parseFloat(c)/this.target.offsetHeight)),f=this.controls.place.offsetHeight*(this.target.scrollTop/c)+"px";return{mul:c/this.target.offsetHeight,height:e>b?b+"px":e+"px",top:f}},MiniScroll.prototype.draw=function(){var a=document.createElement("div"),b=document.createElement("div");a.className="scroll-place",b.className="scroll",a.appendChild(b),a.id=this.identity,this.controls.place=a,this.controls.scroll=b,this.target.insertBefore(a,this.target.querySelector("*")),this.scrollUpdate()},MiniScroll.prototype.render=function(a){for(var b=0;b<this.animation.stack.length;b++){var c=this.animation.stack[b],d=parseInt(c.target);c.element.style[c.prop]=d+c.points}};

Und initialisieren:

<body onload="new MiniScroll(this);"></body>

Und anpassen:

.scroll-place { // ... // }
.scroll { // ... // }
Максим Владимирович
quelle