Ajoutant des flèches de la barre de défilement

Je suis en train d'ajouter des flèches pour la x et y axes de la barre de défilement, voici ma barre de défilement: http://jsfiddle.net/Nk3NH/
Et je veux que cette flèche(image) pour les deux axes: http://i.imgur.com/ygGobeC.png
Je suis à la recherche pour le code que ajouter les flèches comme ça Ajoutant des flèches de la barre de défilement et non vers le haut et vers le bas.

InformationsquelleAutor user2401856 | 2013-05-26
  1. 23

    J'ai été jouer avec elle pour vous.
    J'ai d'abord mis les boutons pour être 10px x 10px pour le rendre plus facile, et créé 4 10 par 10 flèches pointant vers la gauche, la droite, le haut et le bas.
    Puis j'ai mis le fond de taille à 100%, à l'échelle correctement.
    Puis j'ai mis l'image correcte de chaque bouton à l'aide d', le :increment, :decrement, :horizontal et :vertical sélecteurs.
    Les images sont sur ma dropbox pour l'instant, mais vous pouvez ajouter vos propres.

    Voici le code mis à jour: http://jsfiddle.net/Nk3NH/2/

    le code que j'ai écrit était-ce:

    ::-webkit-scrollbar-button {
    background-size: 100%;
    height: 10px;
    width: 10px;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}

::-webkit-scrollbar-button:horizontal:increment {
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon2.png);
}

::-webkit-scrollbar-button:horizontal:decrement {
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon4.png);
}

::-webkit-scrollbar-button:vertical:increment {
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon3.png);
}

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon.png);
}

    EDIT:
    Réussi à obtenir le défilement les boutons uns à côté des autres comme OP voulu par l'ajout de ces styles:

    ::-webkit-scrollbar-button:end {
    display: block;
}

::-webkit-scrollbar-button:start {
    display: none;
}

    http://jsfiddle.net/Nk3NH/4/

    Code mis à jour avec des images en base64 au lieu de liens cassés:

    http://jsfiddle.net/burkybang/1z7vgfpt/

    • Désolé, mais ce code n'est pas exactement ce dont j'ai besoin parce que je veux que les boutons comme je l'ai dit comme ça: i.imgur.com/aMl9c6y.gif Si vous l'avez fait, je vais vous donner 20 réputation..
    • Oui, je sais que vous l'avez écrit vous-même, ne vous inquiétez pas, vous obtiendrez 20 réputation pour que, si vous faites ce que je vous demande de vous 😉
    • Désolé mal pendant une seconde
    • Désolé, j'ai essayé pendant des âges et ne pouvez pas sembler obtenir le double des boutons, je pourrais essayer de nouveau tommorow. 🙁
    • Ok, je vais vous donner encore 30 réputation si vous le faites, maintenant, je vais vous donner 10 mais si vous n'avez pas le faire pour moi jusqu'à demain ou après des jours max je peut récupérer les 10 réputation..
    • ok, malade, essayez de vous rappeler, mais pour être honnête, je n'ai pas de soins sur les points de sorte que vous n'avez pas besoin de leur donner
    • laissez-nous continuer cette discussion dans le chat
    • L'homme, je VOUS REMERCIE BEAUCOUP!
    • Pour le plaisir, j'ai vraiment appris beaucoup de choses sur WebKit barres de défilement moi-même tout en ne le faisant

    InformationsquelleAutor charlie-g-cowan
  2. 2
    ::-webkit-scrollbar-button:vertical:decrement {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%235a6268'><polygon points='0,50 100,50 50,0'/></svg>");
}

::-webkit-scrollbar-button:vertical:increment {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%235a6268'><polygon points='0,0 100,0 50,50'/></svg>");
}

    http://jsfiddle.net/2aHeE/5227/

    InformationsquelleAutor DanCZ
  3. 2

    J'ai voulu faire la même chose, mais sans avoir à utiliser background-images pour les flèches. Ma solution est d'utiliser le chevauchement des dégradés d'arrière-plan:

    ::-webkit-scrollbar-button:vertical:start:decrement {
    background:
        linear-gradient(120deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(240deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(0deg, #696969 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #b6b6b6;
}

::-webkit-scrollbar-button:vertical:end:increment {
    background:
        linear-gradient(300deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(60deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(180deg, #696969 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #b6b6b6;
}

::-webkit-scrollbar-button:horizontal:end:increment {
    background:
        linear-gradient(210deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(330deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(90deg, #696969 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #b6b6b6;
}

::-webkit-scrollbar-button:horizontal:start:decrement {
    background:
        linear-gradient(30deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(150deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(270deg, #696969 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #b6b6b6;
}
    InformationsquelleAutor BevansDesign
  4. -2

    Juste ajouter: 

    ::-webkit-scrollbar-thumb {
    background-image:url( http://i.imgur.com/ygGobeC.png);
}
    • C'est malheureusement incomplète code, car cela ajoute à la même image pour les deux axes dans les deux directions haut et bas et que pas exactement ce que je veux
    InformationsquelleAutor Abdallah Barghouti