CSS angepasste Bildlaufleiste in div

Question

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

Answer 1

Es gibt eine Möglichkeit, benutzerdefinierte Bildlaufleisten auf benutzerdefinierte div-Elemente in Ihren HTML-Dokumenten anzuwenden. Hier ist ein Beispiel, das Ihnen dabei hilft. https://codepen.io/adeelibr/pen/dKqZNb Aber um es auf den Punkt zu bringen. Sie können etwas wie dies tun.

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

CSS-Datei sieht folgendermaßen 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;
}

Answer 2

Ich habe viele JS- und CSS-Scrolls ausprobiert und fand, dass dieses hier sehr einfach zu benutzen ist und auf IE, Safari und FF getestet wurde und gut funktioniert.

Wie @thebluefox vorschlägt

So funktioniert es

Fügen Sie das folgende Skript in die Datei

<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 dies 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 Details besuchen Sie die Plugin-Seite

FaceScroll Benutzerdefinierte Bildlaufleiste

Ich hoffe, es hilft.

Answer 3

Angenommen, Sie haben das div als

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

CSS-Stile anwenden als

//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;
}

Die resultierende Schriftrolle erscheint als

Answer 4

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

Unterstützt auf CHROME

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

Wenn Sie nach weiteren Beispielen suchen, sehen Sie hier nach Weitere Beispiele

---

Eine andere Methode ist Jquery Bildlaufleisten-Plugin

Es unterstützt alle Browser und ist einfach anzuwenden

Laden Sie das Plugin herunter von Hier herunterladen

Verwendung und weitere Optionen CHECK THIS

DEMO

Answer 5

Für Leute, die noch nach einer guten Lösung suchen, habe ich gerade dieses Plugin entdeckt simplebar

Benutzerdefinierte Scrollbars Vanille-Javascript-Bibliothek mit nativen Scroll, getan einfach, leicht, einfach zu bedienen und Cross-Browser.

In meinem Fall war ich auf der Suche nach reactJS-Lösungen, der Autor bietet auch Wrapper für react, angular, vue und next Beispiele