css扩展之voerflow滚动条样式

By admin at 2017-11-13 • 0人收藏 • 785人看过
<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>

gifTest1.gif

登录后方可回帖

登 录
信息栏
本站永久域名:HtmLayout.Cn
纯私人站,当笔记本用的,学到哪写到哪,目前正在学aardio+halcon机器视觉.
Sciter中文在线文档Sciter在线学习文档
本 站 主 站:Stm32cube中文网
Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
aardio在线手册Aardio在线手册
C大Aardio论坛:Aar爱好者论坛
简码教程网:简码编程
AARDIO语言QQ群:70517368
赞助商:才仁机械
下载站:非凡软件站
Loading...