È possibile specificare la barra di scorrimento immagine con HTML5?

Ho bisogno di visualizzare un personalizzato barra di scorrimento. Vorrei evitare di utilizzare un plugin per jQuery, se possibile. Così posso quindi qualcosa di simile a questo con HTML5 & CSS3 ? :

.myScrollableBox {
  width: 200px;
  height: 500px;

  /* Display scrollbar if content is bigger than the box */
  overflow: auto;

  /* This doesn't work, but can I do something similar? */
  scrollbar-image: url(/images/myscrollbar.png); 
}

 

3 Replies
  1. 10

    È effettivamente possibile, se il browser non supporta stile della barra degli strumenti elementi (= è basato su WebKit). Anche se non è menzionato in molti tutorial (come questo brillante, per esempio), si può semplicemente utilizzare background-url proprietà personalizzate di immagine al posto del colore.

    Per esempio, in questa pagina ho cambiato (in Chrome Developer Tools) styling…

    ::-webkit-scrollbar-thumb {
      -webkit-border-radius: 10px;
      border-radius: 10px;
      background: url('http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-10/images/header-demos.jpg');
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    }

    … e voilà, ho qualche cyanid scroller. )

  2. 3

    Sì, è possibile, ma non è supportato da tutti i browser. Webkit (Chrome, ecc) ha il supporto per questo tramite i css:

    -webkit-scrollbar
    -webkit-scrollbar-button
    -webkit-scrollbar-track
    -webkit-scrollbar-track-piece
    -webkit-scrollbar-thumb
    -webkit-scrollbar-corner
    -webkit-resizer

    Leggi di più: https://www.webkit.org/blog/363/styling-scrollbars/

    In Internet Explorer è possibile utente css come
    scrollbar-face-color o -ms-scrollbar-face-color

    -ms-scrollbar-3dlight-color
    -ms-scrollbar-arrow-color
    -ms-scrollbar-base-color
    -ms-scrollbar-darkshadow-color
    -ms-scrollbar-face-color
    -ms-scrollbar-highlight-color
    -ms-scrollbar-shadow-color
    -ms-scrollbar-track-color 

    Leggi di più: http://msdn.microsoft.com/en-us/library/ie/hh772048%28v=vs.85%29.aspx

    Per quanto ne so io, gli altri browser non supportano questo, al momento.

  3. -1

    no, che non è davvero possibile. La barra di scorrimento utilizzato dal browser non è un’immagine, posta all’interno di una pagina html. Fa parte del browser logica. Non si può semplicemente sostituire.

    • Bene, a volte anche più cose inimmaginabili sono rese possibili da questi moderny browser. )
    • certo, si può assumere, ad esempio, il browser di codice sorgente e riprogrammarlo. Che certamente è possibile, vero.

Lascia un commento