Scrollbar

Własny scrollbar i przewijanie zawartości diva

Za pomocą CSS można w prosty sposób dodać do elementu blokowego standardowy pasek przewijania tzw. scrollbar. Służy do tego parametr overflow.

Przykład:

Dostępne atrybuty:

  • overflow: scroll – suwak jest zawsze widoczny (na wierzchu),
  • overflow: hidden – suwak jest ukryty,
  • overflow: auto – suwak pojawia się automatycznie,
  • overflow: visible – wartość domyślna.

Aby dodać suwak z własnymi stylami można skorzystać z rozszerzenia dedykowanego dla CSS:

  • -webkit- (dla przeglądarek: Google Chrome, Safari, Opera),
  • -moz- (Mozilla Firefox),
  • -ms- (Microsoft Internet Explorer).

Dla przeglądarek interpretujących -webkit- można używać następujących atrybutów:

  • ::-webkit-scrollbar – ogólny wygląd suwaka (np: width, height),
  • ::-webkit-scrollbar-button – dolny i górny przycisk suwaka,
  • ::-webkit-scrollbar-thumb – uchwyt (belka) przewijania,
  • ::-webkit-scrollbar-track – pasek postępu,
  • ::-webkit-scrollbar-track-piece,
  • ::-webkit-scrollbar-corner – dolna krawędź suwaka
  • ::-webkit-resizer – uchwyt zmiany rozmiaru pola (pojawia się w niektórych elementach blokowych, np: textarea).

Przykład:

wydrukuj temat