webkit css scrollbar style

Est-il un moyen de se débarrasser de défilement de la piste entièrement? Ou la superposition de contenu plutôt que de pousser de côté? Comme iOS/Lion barres de défilement?

La suite est assez proche, mais même si la piste est transparent, le contenu de la région de défilement est plus poussé et le fond de la page montre à travers. 

::-webkit-scrollbar {  
    width:8px;
    height:8px;
    -webkit-border-radius: 4px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
    background-color:transparent;
}

::-webkit-scrollbar-thumb {  
    background-color: rgba(053, 057, 071, 0.3);
    width: 6px;
    height: 6px;
    -webkit-border-radius:4px;
}
Pourquoi ne pas utiliser une barre de défilement personnalisée, telles que jQuery à base de jScrollPane? Vous pouvez définir le style pour s'étendre sur le contenu, si vous le souhaitez.
J'ai essayé jScrollPane, ainsi que quelques unes de mes propres solutions à l'aide de css3 traduit, css postes, etc... aucun n'est aussi rapide qu'une réelle barre de défilement. Il semble juste comme beaucoup de frais généraux supplémentaires pour quelque chose de déjà intégré dans le navigateur. Si il est possible d'utiliser les ascenseurs, plutôt que de peu de javascript faux, il semble juste comme une meilleure idée.
J'ai trouvé baijs.nl/tinyscrollbar fonctionne très bien et est rapide (dans les termes de la réponse du contenu de la vitesse de défilement) et très facile à mettre en place.
Vous cam donner de la marge de droite comme -8px où la barre de défilement tend à apparaître. si ce n'est plus un hack façon, mais il devrait vous aller.

OriginalL'auteur nicholas | 2011-08-28

  1. 1

    Hmm, j'ai pensé que j'ai répondu à cette question précédemment, peut-être pas:

    • Masquer le dépassement de capacité sur le corps
    • envelopper l'ensemble du contenu du site ou tout ce que vous faites défiler avec un div,
    • Comprennent les propriétés css de l'
      div (overflow:scroll ou overflow-y:scroll).

    Maintenant, vous pouvez définir la piste css pour toute opacité à l'aide rgba(0,0,0,0.3) parce que le scroll n'est pas une partie du corps.

    Une autre astuce pour personnaliser firefox barre de défilement si vous voulez expérimenter c'est:

    • Ne le débordement de la chose et de la superposition de la barre de défilement (via z-index) avec un fond transparent div quelle que soit la couleur que vous voulez,
    • Position de la div sur l'ensemble de la section scroll (probablement quelque chose comme position:absolute; right:0; si vous utilisez le rouleau pour l'ensemble de la fenêtre)
    • Utilisation de pointeur-events: none; sur les divs css pour le rendre semi-transparent.

    Il donnera le firefox de défilement un peu de couleur et de texture. (Peut être idéal pour forcer le faites défiler vers la droite à des fins de comparabilité)

    Je n'ai pas encore essayé mais c'est possible

    Je ne suis pas sûr que je comprends ce que tu veux. Découvrez ce plunk: plnkr.co/modifier/hbBT0lehOHlD0cizHmVn?p=preview. Ce que je cherche à faire est d'obtenir les paragraphes en rouge pour s'adapter à tous le chemin vers la droite, et le bleu de la barre de défilement pour flotter au-dessus d'eux. Si j'ai pu en tirer le bleu de la barre de défilement loin des bords un peu trop, même mieux.

    OriginalL'auteur Undefined