css 设置水平滚动条 及其样式
<!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>
效果如图：
