wake-up-neo.net

Cross-Browser im CSS-Scrollbar-Stil

Wie kann ich einen Cross-Browser im CSS-Scrollbar-Stil definieren? Ich habe diesen Code getestet, er funktioniert nur in IE und in Opera, ist jedoch in Chrome, Safari und Firefox fehlgeschlagen.

<style type="text/css">
<!--    
body {
    scrollbar-face-color: #000000;
    scrollbar-shadow-color: #2D2C4D;
    scrollbar-highlight-color:#7D7E94;
    scrollbar-3dlight-color: #7D7E94;
    scrollbar-darkshadow-color: #2D2C4D;
    scrollbar-track-color: #7D7E94;
    scrollbar-arrow-color: #C1C1D1;
}
-->
</style>
cssscrollbar
157
yuli chika

CSS-Stile für Bildlaufleisten sind eine Kuriosität, die von Microsoft-Entwicklern erfunden wurde. Sie sind nicht Teil des W3C-Standards für CSS und werden von den meisten Browsern einfach ignoriert.

114
Till Helge

Webkits Unterstützung für Bildlaufleisten ist ziemlich ausgefeilt . Dieses CSS bietet eine sehr minimale Bildlaufleiste mit einer hellgrauen Spur und einem dunkleren Daumen:

::-webkit-scrollbar
{
  width: 12px;  /* for vertical scrollbars */
  height: 12px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb
{
  background: rgba(0, 0, 0, 0.5);
}

Diese Antwort ist eine fantastische Quelle für zusätzliche Informationen.

145
Drew Noakes

jScrollPane ist eine gute Lösung, um Browser-Bildlaufleisten zu überqueren und die Qualität zu verbessern.

31
Hussein

nanoScrollerJS ist einfach zu benutzen. Ich benutze sie immer ...

Browser-Kompatibilität:
  • IE7 +
  • Firefox 3+
  • Chrome
  • Safari 4+
  • Opera 11.60+
Unterstützung für mobile Browser:
  • iOS 5+ (iPhone, iPad und iPod Touch)
  • iOS 4 (mit einer Polyfüllung)
  • Android Firefox
  • Nativer Android 2.2/2.3-Browser (mit einer Polyfüllung)
  • Android Opera 11.6 (mit einer Polyfüllung)

Codebeispiel aus der Dokumentation,

  1. Markup - Die folgende Art von Markup-Struktur wird benötigt, damit das Plugin funktioniert.

    ... Inhalt hier ...
12
Footniko

Ab IE6 können Sie die Bildlaufleiste meiner Meinung nach nicht mit diesen Eigenschaften anpassen. Der oben verlinkte Chris Coyier-Artikel geht detailliert auf die Optionen für Webkit-proprietäre CSS zum Anpassen der Bildlaufleiste ein.

Wenn Sie wirklich eine browserübergreifende Lösung suchen, die Sie vollständig anpassen können, müssen Sie JS verwenden. Hier ist ein Link zu einem Nizza Plugin namens FaceScroll: http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm

1
DMTintner

versuchen Sie dies, es ist sehr einfach zu verwenden und auf IE und Safari und FF getestet und hat einwandfrei funktioniert. Außerdem sind nicht viele div erforderlich. Fügen Sie einfach id hinzu, und es funktioniert einwandfrei, nachdem Sie Js- und Css-Dateien verknüpft haben . FaceScroll Custom-Bildlaufleiste

ich hoffe es hilft

Bearbeiten Schritt 1: Fügen Sie das folgende Skript zum Abschnitt Ihrer Seite hinzu:

<link href="general.css" rel="stylesheet" type="text/css">

<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>

Schritt 2: Fügen Sie dann im KÖRPER Ihrer Seite den folgenden Beispiel-HTML-Block zu Ihrer Seite hinzu.

<p><b>Scrollbar (default style) shows onMouseover</b></p>

<div id="demo1" style="width:300px; height:250px; padding:8px; background:lightyellow; border:1px solid gray; resize:both; overflow:scroll">

From Wikipedia- Gunpowder, also known since in the late 19th century as black powder, was the first chemical explosive and the only one known until the mid 1800s.[2] It is a mixture of sulfur, charcoal, and potassium nitrate (saltpeter) - with the sulfur and charcoal acting as fuels, while the saltpeter works as an oxidizer.[3] Because of its 
</div>

<br />

<p><b>Scrollbar (alternate style), always shown</b></p>

<div id="demo2" style="width:400px; height:130px; padding:10px; padding-right:8px; background:lightyellow; border:1px solid gray; overflow:scroll; resize:both;">

From Wikipedia- Gunpowder, also known since in the late 19th century as black powder, was the first chemical explosive and the only one known until the mid 1800s.[2] It is a mixture of sulfur, charcoal, and potassium nitrate (saltpeter) - with the sulfur and charcoal acting as fuels, while the saltpeter works as an oxidizer.[3] Because of its 
</div>
0
Yousef Altaf