CSS—移动端导航（div）横向滑动，并消除横向滚动轴（图文详情）

CSS—移动端导航横向滑动，并消除横向滚动轴

假设我写了一个导航（div照样适用）

 <ul>
        <li>学习</li>
        <li>学习</li>
        <li>学习</li>
        <li>学习</li>
        <li>学习</li>
        <li>学习</li>
        <li>学习</li>
        <li>学习</li>
 </ul>

第一步：css样式

ul{
        width: 100%;
        height: 76/@r;
        white-space: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
        // 一定要加上overflow-y：hidden，不然还可以上下滑动
        // 重点就是white-space 和 overflow-x的设置，
        //white-space是为了不折行
       // overflow-x： scroll是为了出现滚动轴
        display: flex;
        align-items: center;
        padding: 0 30/@r;
        box-sizing: border-box;
        li{
          flex: 1;
          text-align: center;
          margin-right: 50/@r;
        }
      }

但这个时候会发现出现了横向滚动轴

第二步：消除横向滚动轴

      ul::-webkit-scrollbar {
        display:none
      }

这时横向滚动轴就消失了，并且可以横向滑动

最后

以上就是无心冷风为你收集整理的CSS—移动端导航（div）横向滑动，并消除横向滚动轴（图文详情）的全部内容，希望文章能够帮你解决CSS—移动端导航（div）横向滑动，并消除横向滚动轴（图文详情）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。