css 设置水平滚动条及其样式

最新推荐文章于 2024-05-24 17:17:32 发布

qq_28404381

最新推荐文章于 2024-05-24 17:17:32 发布

阅读量5.5k

点赞数 3

分类专栏： css 文章标签： css水平滚动条滚动条水平滚动条

本文链接：https://blog.youkuaiyun.com/qq_28404381/article/details/96132358

版权

css 专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
.ximiBlock::-webkit-scrollbar-track{  
	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);  
	border-radius: 5px;  
	background-color: rgba(255,255,255,0.8);
}
.ximiBlock::-webkit-scrollbar{  
	height: 10px;			/*设置滚动条样式*/  
	background-color: rgba(0,0,0,0);
}
.ximiBlock::-webkit-scrollbar-thumb{  border-radius: 5px;  -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.3);  background-color: #555;}
.ulbox li {float: left; padding: 0 5px; margin-right: 10px; list-style: none;}
.ulbox::-webkit-scrollbar-track{  -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3);  border-radius: 5px;  background-color: rgba(255,255,255,0.8);}
.ulbox::-webkit-scrollbar{  height: 10px;			/*设置滚动条样式*/  background-color: rgba(0,0,0,0);}
.ulbox::-webkit-scrollbar-thumb{  border-radius: 5px;  -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.3);  background-color: #555;}
		</style>
	</head>
	<body>
		<div style="width: 100px; height: 40px;overflow-x: scroll; overflow-y:hidden;white-space: nowrap;   " class="ximiBlock">
		{foreach $times as $k => $v} 
			<a href="{:url('/detail/'.$v)}">新闻-{$v}</a>
		{/foreach}
		</div>
		<div style="width: 500px; height: 40px;">
			<ul style="width: 100%; height: 100%; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; display: flex;" class="ulbox">
				<li>1241323141231 </li>
				<li>1241323141231 </li>
				<li>1241323141231 </li>
				<li>1241323141231 </li>
				<li>1241323141231 </li>
				<li>1241323141231 </li>
				<li>1241323141231 </li>
				<li>1241323141231 </li>
			</ul>
		</div>
	</body>
</html>