C’è un modo per rendere trasparente personalizzato barra di scorrimento traccia nel browser webkit?

Sto cercando di stile barre di scorrimento che appare sul DIV in un progetto a cui sto lavorando. È webkit solo pensato che avrei potuto ottenere un bel modo con solo CSS piuttosto che i plugin.

Purtroppo ho colpito un grosso problema. Il progetto richiede la barra di scorrimento per la sovrapposizione di contenuti con un effetto trasparente, molto simile a OS X Mountain Lion e iOS.

Personalizzato stili vengono applicati alla barra di scorrimento, tuttavia, ridimensiona il di adattare il contenuto della barra di scorrimento in. Sono riuscito a misura il contenuto in modo che l’ispettore, che mostra il suo sotto la barra di scorrimento per ora, ma io non riesco a fare la barra di scorrimento traccia trasparente.

Ho provato ad applicare questi sia l’ ::-webkit-barra di scorrimento e ::-webkit-scrollbar-track regioni:

  • background:transparent
  • colore di sfondo trasparente con rgba
  • un’immagine di sfondo con trasparenza

Nessuno sembra funzionare. Prima di dare il massimo e provare un JavaScript personalizzato barra di scorrimento soluzione, ho pensato di vedere se qualcun altro ha avuto una risposta.

CSS:

* {
  list-style:none;
  margin:0;
  padding:0;
}
body {
  padding:20px;
}
#content {
  background:#333;
  height:400px;
  padding:1px;
  width:398px;
}
#content li {
  background:#666;
  height:100px;
  margin-bottom:10px;
  width:400px;
}
.scrollable-content {
  overflow-x:hidden;
  overflow-y:scroll;
}
.scrollable-content::-webkit-scrollbar {
  background:transparent;
  width:30px;
}
.scrollable-content::-webkit-scrollbar-track {
  background:transparent;
}
.scrollable-content::-webkit-scrollbar-thumb {
  background:#999;
}

HTML:

<ol class="scrollable-content" id="content">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

Ho controllato già:

webkit css barra di scorrimento per lo styling

Come evitare che un webkit-scrollbar di spingere oltre il contenuto di un div?

CSS: Possibile “spingere” Webkit barre di scorrimento nel contenuto?

  • Sto cercando di risolvere lo stesso problema.
  • Avete mai trovare una soluzione alternativa ? Sto cercando di fare solo la traccia pezzo invisibile.
  • No, non è possibile. Vedere la risposta corretta qui. stackoverflow.com/a/33686575/1008919

 

One Reply
  1. 5

    Ho aggiornato il tuo violino esempio -> http://jsfiddle.net/F9p7S/

    Provare questo approccio:

    .scrollable-content::-webkit-scrollbar * {
        background:transparent;
    }
    .scrollable-content::-webkit-scrollbar-thumb {
        background:#999 !important;
    }
    • Questo non funziona.
    • Non funziona se lo sfondo è di opacità (cioè rgba)
    • Questo funziona, andare al violino e assicurarsi di utilizzare tutti e 3 i selettori (solo 2 elencati qui). Il primo determina la larghezza e w/o che questo non funzionerà.

Lascia un commento