css 横向滚动条 el-menu 菜单横向滚动条_el-menu 横向滚动条

<el-col :span="16" class="menuClass">
            <el-menu
              class="oneNav"
              mode="horizontal"
              background-color="#007ff5"
              text-color="#fff"
              active-text-color="#fff"
              router
              :default-active="defalutPath"
              style="border-bottom: none; text-decoration: none"
            >
              <!-- :default-active="$router.history.current.path" -->
              <el-menu-item index="/Index"
                ><i class="el-icon-s-home"></i><span>首页</span></el-menu-item
              >
              <el-menu-item index="/depIndex"
                ><i class="el-icon-s-home"></i><span>部门统计</span></el-menu-item
              >
              <el-menu-item index="/main"
                ><i class="el-icon-office-building"></i><span>曝光台</span></el-menu-item
              >
 
              <el-menu-item index="/jwdb/collection/list"
                ><i class="el-icon-edit-outline"></i>任务采集</el-menu-item
              >
 
              <el-menu-item index="/jwdb/distribute/list"
                ><i class="el-icon-document-checked"></i>任务处理</el-menu-item
              >
 
              <!--<el-menu-item index="/jwdcsj/superviseCollection/collectionUnit"
                ><i class="el-icon-edit-outline"></i>任务采集</el-menu-item
              >
 
              <el-menu-item index="/jwdcsj/distributeTask/pendingTaskList"
                ><i class="el-icon-document-checked"></i>任务处理</el-menu-item
              >-->
 
              <el-menu-item index="/onlineinspector"
                ><i class="el-icon-s-check"></i>在线督查</el-menu-item
              >
 
              <el-menu-item index="/onlineinspector2"
                ><i class="el-icon-s-check"></i>在线督查2</el-menu-item
              >
 
              <el-menu-item index="/pending"
                ><i class="el-icon-s-order"></i> 待办任务</el-menu-item
              >
              <el-menu-item index="/integral"
                ><i class="el-icon-coin"></i>积分管理</el-menu-item
              >
              <!-- <el-menu-item index="/query"><i class="el-icon-search"></i>在线查询</el-menu-item> -->
 
              <el-menu-item index="/onlineQuery/keywordsQuery"
                ><i class="el-icon-search"></i>在线查询</el-menu-item
              >
 
              <el-menu-item index="/unioninspector"
                ><i class="el-icon-collection"></i>学习资料</el-menu-item
              >
              <!-- <el-menu-item index="/bulletinBoard"><i class="el-icon-connection"></i>督查联盟</el-menu-item> -->
              <!-- <el-menu-item index="/screen"><i class="el-icon-connection"></i>驾驶舱</el-menu-item>  -->
 
              <el-menu-item index="/notice/list"
                ><i class="el-icon-collection"></i>通知</el-menu-item
              >
            </el-menu>
          </el-col>

<!--设置顶部菜单可滚动-->
<style scoped>
.menuClass ul {
  display: flex;
  overflow-x: hidden;
  overflow-y: hidden;
 
  z-index: 100;
}
 
.menuClass ul:hover {
  overflow-x: auto;
}
 
/*.menuClass ul li {
  flex: none;
}*/
 
/* 对于 Chrome 和 Safari 用户*/
/* 设置滚动条的宽度 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
 
/* 设置滚动条轨道的样式 */
::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
 
/* 设置滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #333;
}
::-webkit-scrollbar-corner {
  background: #179a16;
}
 
/*对于 Firefox 用户 */
* {
  /*控制滚动条的宽度 */
  scrollbar-width: thin;
  /*设置滑块和轨道的颜色 */
  scrollbar-color: rgb(239, 239, 239) #bfbfbf;
}
</style>