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:
|
1 |
div { overflow:scroll; } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<html> <head> <title> Scrollbar </title> <meta charset="utf-8"/> <style type="text/css"> #textarea { width:500px; height:350px; padding:0 20px 0 20px; overflow:auto; } ::-webkit-scrollbar { -webkit-appearance:none; width:10px; } ::-webkit-scrollbar-track { background:#f1f1f1; } ::-webkit-scrollbar-thumb { background:#ccc; } ::-webkit-scrollbar-thumb:hover { background:#888; } </style> </head> <body> <div id="textarea"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </body> </html> |
