wake-up-neo.net

Angepasste CSS-Bildlaufleiste in div

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

298
harisdev

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

Scrollbar-CSS-Unterstützung

Derzeit gibt es keine browserübergreifenden Bildlaufleisten-CSS-Styling-Definitionen. Der W3C-Artikel , den ich am Ende erwähne, hat die folgende Aussage und wurde kürzlich aktualisiert (10. Oktober 2014):

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

Microsoft

Wie bereits erwähnt, unterstützt Microsoft den Stil der Bildlaufleiste, 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 verfügt WebKit jetzt über eine eigene Version:

Firefox (Gecko)

Ab Version 64 unterstützt Firefox die Bildlaufleiste über die Eigenschaften scrollbar-color (teilweise W3C draft ) und scrollbar-width ( W3C draft ). Einige gute Informationen zur Implementierung finden Sie in this answer .

Browserübergreifende 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 durchsuchen Sie die verfügbaren Lösungen, recherchieren und testen sie. Ich bin sicher, Sie werden etwas finden, das Ihren Bedürfnissen entspricht.

Verhindern Sie illegale Bildlaufleistenstyling

Für den Fall, dass Sie verhindern möchten, dass die Bildlaufleiste nicht mit "-vendor" vorangestellt wird, enthält in diesem Artikel über 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 den ungültigen Stil der Bildlaufleiste auf jeder besuchten Seite.

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 oben nicht verlinkt

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

654
JSuar

Probieren Sie es aus 

Quelle: http://areaaperta.com/nicescroll/

Einfache Implementierung 

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

  function() { 

    $("html").niceScroll();

  }

);
</script>

Es ist eine jQuery-Plugin-Bildlaufleiste, sodass die Bildlaufleisten steuerbar sind und in den verschiedenen Betriebssystemen gleich aussehen.

12

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

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

10
elclanrs

Ich denke, in diesem Thread fehlt eine Sache. Wenn Sie das Scrollen per Plugin implementieren möchten, ist das beste im Jahr 2014 Sly .

Es handelt sich um eine reine JavaScript-Bildlaufleiste, sodass Ihre Bildlaufleisten unter den verschiedenen Betriebssystemen gleich sind. 

Es hat die besten Leistungen und Funktionen. Kaum ein anderer kommt näher. Verschwenden Sie keine Zeit mit der Auswahl aus unzähligen halbgebackenen Buggys anderer Bibliotheken.

8
Capaj

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
  • Opera
  • Safari

Aber iScroll funktioniert nicht mit Berührung!

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

5
Ouadie

Wie viele Leute suchte ich nach etwas, das war:

  • Konsequent gestaltet und funktional für die meisten modernen Browser
  • Nicht eine lächerliche aufgeblähte jQuery-Erweiterung mit 3000 Zeilen, cr * p

... aber leider nichts!

Nun, wenn es sich lohnt, einen Job zu erledigen ... Ich konnte in ungefähr 30 Minuten etwas einrichten. Disclaimer: Es gibt einige bekannte (und wahrscheinlich einige bis jetzt unbekannte) Probleme, aber das macht mich Ich frage mich, wozu die anderen 2920 JS-Linien 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>

4
ne1410s

Bitte überprüfen Sie diesen Link. Beispiel mit Arbeitsdemo

   #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

4
user7005809

Hier ein Beispiel für ein Webkit, 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:

enter image description here

3
Denys Wessels

Zu Ihrer Information, das ist, was Google in einigen seiner Anwendungen seit langem verwendet. Überprüfen Sie im jsfiddle, dass die Bildlaufleiste irgendwie verchromt wird, wenn Sie die nächsten Klassen anwenden, aber es funktioniert noch. 

jfk-scrollbar jfk-scrollbar-borderless jfk-scrollbar-dark

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

Ich fand es einfach nützlich, die Pfeile von den Bildlaufleisten zu entfernen. Seit 2015 wird es in maps.google.com verwendet, wenn Sie nach Orten in der Ergebnisliste in der Materialdesign-Benutzeroberfläche suchen.

2
le0diaz

Ich habe eine Menge JS- und CSS-Scrolls ausprobiert, und ich fand, dass dies sehr einfach zu bedienen ist und auf IE und Safari und FF getestet wurde

AS @thebluefox schlägt vor

So funktioniert es

Fügen Sie das folgende Skript zu .__ 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>

Für weitere Informationen besuchen Sie die Plugin-Seite 

Benutzerdefinierte Bildlaufleiste von FaceScroll

ich hoffe es hilft

1
Yousef Altaf

Die neue Firefox-Version (64) unterstützt CSS-Scrollbars Modul 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>

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

Firefox scrollbar

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

1

Die Webkit-Bildlaufleiste unterstützt die meisten Browser nicht.

Unterstützt CHROME

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

Wenn Sie nach weiteren Beispielen suchen Markieren Sie das Weitere Beispiele


Eine andere Methode ist Jquery Scrollbar Plugin

Es unterstützt alle Browser und ist einfach anzuwenden

Laden Sie das Plugin von Download Here herunter.

Verwendung von und für weitere Optionen CHECK THIS

DEMO

1
Nikz
.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 Handy/osx wie eins.

1
csomakk

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 eine Idee davon. Sie können so etwas tun.

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

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;
}
0
Adeel Imran