css扩展之voerflow滚动条样式
By
admin
at 2017-11-13 • 0人收藏 • 882人看过
<html> <head> <title>Width 120% is cute</title> <style type="text/css"> body { height:100%%; width:100%%; font:10pt Verdana; background-color: white peachpuff peachpuff papayawhip; } /* style block defining vertical scrollbar */ @set my-v-scrollbar { .prev { border:1px solid #AAA; foreground-image:url( sb-v-scroll-prev.png ); foreground-position:50% 50%; foreground-repeat:no-repeat; } .next { border:1px solid #AAA; foreground-image:url( sb-v-scroll-next.png ); foreground-position:50% 50%; foreground-repeat:no-repeat; } .base, .next-page, .prev-page { background-image:url( sb-scroll-back.png ); background-position:5px 5px 5px 5px; /*left top right bottom offsets*/ background-repeat:expand; } .slider { border:1px solid #AAA; foreground-image:url( sb-scroll-slider.png ); foreground-position:50% 50%; foreground-repeat:no-repeat; } .next:disabled, .slider:disabled, .prev:disabled { height:0; border:none; foreground-image:none; } .base:disabled { background-image:url( sb-scroll-base.png ); background-repeat:repeat; background-position:0 0 0 0; } .next:hover, .slider:hover, .prev:hover { background-color: #EEE; } .next:active, .slider:active, .prev:active { background-color: #FFF; } .base { width:24px; } /* explicit declaration of its width */ } /* style block defining horizontal scrollbar */ @set my-h-scrollbar { .prev { border:1px solid #AAA; foreground-image:url( sb-h-scroll-prev.png ); foreground-position:50% 50%; foreground-repeat:no-repeat; width:system-scrollbar-width; } .next { border:1px solid #AAA; foreground-image:url( sb-h-scroll-next.png ); foreground-position:50% 50%; foreground-repeat:no-repeat; width:system-scrollbar-width; } .next-page, .prev-page, .base { background-image:url( sb-scroll-back.png ); background-position:5px 5px 5px 5px; /*left top right bottom offsets*/ background-repeat:expand; } .slider { border:1px solid #AAA; foreground-image:url( sb-scroll-slider.png ); foreground-position:50% 50%; foreground-repeat:no-repeat; } .next:disabled, .slider:disabled, .prev:disabled { foreground-image:none; border:none; foreground-image:none; width:0; } .base:disabled { background-image:url( sb-scroll-base.png ); background-repeat:repeat; background-position:0 0 0 0; } .next:hover, .slider:hover, .prev:hover { background-color: #EEE; } .next:active, .slider:active, .prev:active { background-color: #FFF; } .base { height: 15px; } /* explicit declaration of its height */ } #horizontal-container { height:100%%; width:100%%; flow:horizontal; } div { height:75%; } ul { vertical-scrollbar: my-v-scrollbar; horizontal-scrollbar: my-h-scrollbar; margin: 10px; padding: 5px; width: 100%%; height: 100%%; border: dashed black 4px; list-style-type: none; color: black; } li { margin: 5px; padding: 5px; width: 80%; border: dashed black 1px; background-color: white; color: black; } #window-scroll-always { overflow: scroll; } #window-scroll-auto { overflow: auto; } #window-scroll-hidden { overflow: hidden; } #window-scroll-visible { overflow: visible; } </style> </head> <body> <h1>gradient background and transparent overflows</h1> <div id="horizontal-container"> <div> <center>oveflow:scroll</center> <ul id="window-scroll-always" tabindex=0> <li> Hello</li> <li> Wibble</li> <li> Foo</li> <li> Bar</li> <li> Baz</li> </ul> </div> <div> <center>oveflow:auto</center> <ul id="window-scroll-auto" tabindex=0> <li> Hello</li> <li> Wibble</li> <li> Foo</li> <li> Bar</li> <li> Baz</li> </ul> </div> <div> <center>oveflow:hidden</center> <ul id="window-scroll-hidden" tabindex=0> <li> Hello</li> <li> Wibble</li> <li> Foo</li> <li> Bar</li> <li> Baz</li> </ul> </div> <div> <center>oveflow:visible</center> <ul id="window-scroll-visible"> <li> Hello</li> <li> Wibble</li> <li> Foo</li> <li> Bar</li> <li> Baz</li> </ul> </div> </div> </body> </html>
登录后方可回帖