CSS personnalisé de barre de défilement dans la div
14 réponses
j'ai pensé qu'il serait utile de consolider les dernières informations sur les barres de défilement, CSS, et la compatibilité de navigateur.
de la Barre de Défilement du Support technique CSS
à l'heure actuelle, il n'existe aucune définition de style CSS pour les barres de défilement croisées. l'article du W3C je mentionne à la fin a la déclaration suivante et a été récemment mis à jour (10 Oct 2014):
certains navigateurs (IE, Konqueror) prennent en charge les propriétés non standard 'scrollbar-shadow-color', 'scrollbar-track-color' et d'autres. ces propriétés sont illégales: elles ne sont définies dans aucune spécification CSS et ne sont pas non plus marquées comme propriétaires (en les préfixant par "-Vendeur-")
Microsoft
comme d'autres l'ont mentionné, Microsoft supporte le style de barre de défilement, mais seulement pour IE8 et au-dessus.
exemple:
<!-- 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)
de même, WebKit a maintenant sa propre version:
- le Style des barres de défilement: https://www.webkit.org/blog/363/styling-scrollbars/
- démo de tous les styles de barre de défilement WebKit
-
à Partir de Personnaliser les barres de défilement dans WebKit , pertinentes CSS:
/* pseudo elements */ ::-webkit-scrollbar { } ::-webkit-scrollbar-button { } ::-webkit-scrollbar-track { } ::-webkit-scrollbar-track-piece { } ::-webkit-scrollbar-thumb { } ::-webkit-scrollbar-corner { } ::-webkit-resizer { } /* pseudo class selectors */ :horizontal :vertical :decrement :increment :start :end :double-button :single-button :no-button :corner-present :window-inactive
Firefox (Gecko)
Firefox n'a pas sa propre version des styles de barre de rouleau selon ce donc répondre.
il n'y a pas de Gecko équivalent à
::-webkit-scrollbar
et des amis.vous devrez vous en tenir à jQuery.
Beaucoup de gens aimeraient cette fonctionnalité, voir:
https://bugzilla.mozilla.org/show_bug.cgi?id=77790ce rapport demande exactement la même chose que vous demandez: https://bugzilla.mozilla.org/show_bug.cgi?id=547260
de la Croix-navigateur Barre de Défilement Style
les bibliothèques JavaScript et les plug-ins peuvent fournir une solution de navigation croisée. Il existe de nombreuses options.
- 20 jQuery Scrollbar plugin avec des exemples (24 juillet 2012) )
- 30+ JavaScript/Ajax Techniques pour les Curseurs, les Ascenseurs et les Barres de défilement (Mai 07, 2008)
- 21 tutoriels utiles de style CSS/JavaScript (août 2012)
- 15+ plugins gratuits et Premium jQuery Scrolling (26 août 2012)
La liste pourrait continuer. Votre meilleur pari est de chercher, rechercher et tester les solutions disponibles. Je suis sûr que vous trouverez quelque chose qui répondra à vos besoins.
Empêcher L'Barre De Défilement Style
Juste au cas où vous voulez empêcher la barre de défilement style qui n'a pas été correctement avec le préfixe "fournisseur", cet article au W3C fournit quelques instructions de base . Fondamentalement, vous aurez besoin d'ajouter les CSS suivants à une feuille de style utilisateur associée à votre navigateur. Ces définitions outrepasseront le défilement non valide style bar sur n'importe quelle page que vous visitez.
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;
}
les Questions identiques ou Similaires de la Source / Pas de lien ci-Dessus
- changer le style des rouleaux
- CSS scrollbar style de la croix-navigateur
- comment créer un scrollbar personnalisé sur un div (style Facebook)
Remarque: Cette réponse contient des informations provenant de diverses sources. Si une source a été utilisée, alors elle est aussi liée dans cette réponse.
les barres de défilement personnalisées ne sont pas possibles avec CSS, vous aurez besoin de magie JavaScript.
certains navigateurs prennent en charge des règles CSS non spécifiques, comme ::-webkit-scrollbar
dans Webkit, mais ce n'est pas idéal car cela ne fonctionnera que dans Webkit. IE avait quelque chose comme ça aussi, mais je ne pense pas qu'ils le soutiennent plus.
Donner à ceci un essai
Source: http://areaaperta.com/nicescroll /
Simple Mise En Œuvre
<script type="text/javascript">
$(document).ready(
function() {
$("html").niceScroll();
}
);
</script>
c'est un plugin jQuery scrollbar, donc vos scrollbars sont contrôlables et ressemblent à travers les différents OS.
je pense qu'il manque une chose dans ce fil. Si vous souhaitez par hasard mettre en œuvre le scrolling via plugin, de loin le meilleur en 2014 est Sly .
c'est un scrollbar pur javascript, donc vos scrollbars sont contrôlables et ressemblent à travers les différents OS.
Il a les meilleures performances et fonctionnalités. Aucun autre vient même à proximité. Ne perdez pas de temps à choisir parmi des myriades de buggy à demi bibliothèque.
j'ai essayé beaucoup de plugins, la plupart d'entre eux ne prennent pas en charge tous les navigateurs, je préfère iScroll et nanoScroller fonctionne pour tous ces navigateurs:
- IE11 -> IE6
- IE10 - WP8
- IE9 - WP7
- IE Xbox One
- IE Xbox 360
- Google Chrome
- FireFox
- Opéra
- Safari
Mais iScroll ne fonctionnent pas avec touch!
demo iScroll : http://lab.cubiq.org/iscroll/examples/simple/
Démo nanoScroller : http://jamesflorentino.github.io/nanoScrollerJS/
voici un exemple de webkit qui fonctionne pour Chrome et Safari:
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;
}
sortie:
comme beaucoup de gens, je cherchais quelque chose qui était:
- toujours stylisé et fonctionnel sur la plupart des navigateurs modernes
- ce n'est Pas quelques ridicule 3000 ligne de ballonnement jQuery extension de cr*p
...Mais hélas rien!
Eh bien, si un travail en vaut la peine... J'ai pu faire démarrer quelque chose en 30 minutes. Disclaimer: il y en a assez peu connus (et probablement quelques-uns mais je me demande à quoi servent les autres 2920 lignes de JS dans beaucoup d'offrandes!
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>
veuillez vérifier ce lien. Exemple avec la démo de travail
#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;
}
POUR INFO, c'est ce que google utilise dans certaines de ses applications depuis longtemps. Vérifiez dans le jsfiddle que si vous appliquez les classes suivantes, ils cachent d'une certaine manière la barre de défilement dans chrome, mais c'est toujours des travaux.
jfk-scrollbar jfk-scrollbar-borderless jfk-scrollbar-dark
http://jsfiddle.net/76kcuem0/32 /
je viens de trouver utile d'enlever les flèches des barres de défilement. en 2015, il a été utilisé dans maps.google.com lors de la recherche de places dans la liste des résultats dans sa conception du matériau UI.
Webkit scrollbar ne supporte pas la plupart des browers.
Supports Sur CHROME
Voici une démo pour webkit scrollbar WebKit Scrollbar DEMO
si vous cherchez plus d'exemples, Cochez cette case plus d'exemples
une autre méthode est Jquery Plugin De Barre De Défilement
il soutient sur tous les navigateurs et facile à appliquer""
télécharger le plugin de télécharger ici
comment utiliser et pour plus d'options cochez cette case
j'ai essayé beaucoup de JS et CSS scroll's et j'ai trouvé que c'était très facile à utiliser et testé sur IE et Safari et FF et travaillé bien
comme le suggère @thebluefox
Voici comment ça marche
ajouter le script ci-dessous au
<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>
et ceci ici dans le paragraphe où vous devez faire défiler
<div id="demo1" style="width:300px; height:250px; padding:8px; resize:both; overflow:scroll">
**Your Paragraph Comes Here**
</div>
pour plus de détails visitez le plugin page
FaceScroll Personnalisé de barre de défilement
espoir aide de la
.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;
}
m'a donné un bon mobile/osx comme un.
il y a un moyen par lequel vous pouvez appliquer des barres de défilement personnalisées à des éléments div personnalisés dans vos documents HTML. Voici un exemple qui permet de. https://codepen.io/adeelibr/pen/dKqZNb mais en gros. Vous pouvez faire quelque chose comme cela.
<div class="scrollbar" id="style-1">
<div class="force-overflow"></div>
</div>
Le fichier CSS ressemble à ceci.
.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;
}
ou utiliser quelque chose comme ceci:
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}};
et initialiser:
<body onload="new MiniScroll(this);"></body>
et personnaliser:
.scroll-place { // ... // }
.scroll { // ... // }