css扩展之voerflow滚动条样式
By
admin
at 2017-11-13 • 0人收藏 • 1254人看过
<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>
登录后方可回帖
