01/07 发表评论

通过 css3 可以不使用 js 实现横向导航栏的拖拽滚动效果:

小二儿,先上完整版代码...

<style>
.m-nav{height:36px;margin:8px 0;font-size:0;overflow:hidden;}
.m-nav ul{height:60px;white-space:nowrap;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
.m-nav li{display:inline-block;width:36px;height:36px;margin-right:8px;vertical-align:top;background:#363951;border-radius:100%;}
.m-nav li:last-child{margin-right:12px;}
.m-nav li img{width:100%;height:100%;}
</style>
<nav class="m-nav">
    <ul>
        <li>首页</li>
        <li>新闻</li>
        <li>图片</li>
        <li>评论</li>
        <li>下载</li>
        <li>视频</li>
        <li>图文</li>
        <li>文字</li>
        <li>列表</li>
        <li>动物</li>
        <li>水果</li>
        <li>食物</li>
        <li>面食</li>
        <li>咸菜</li>
        <li>大蒜</li>
    </ul>
</nav>

在实现的过程中有几个问题需要解释一下:

  1. 在 ios 下实现原生的滚动效果:
    通过添加 -webkit-overflow-scrolling:touch; 样式实现 ios 下原生的流畅的滚动效果;但是这样会出现另一个问题,出现了滚动条,虽然在 ios 下滚动条是默认隐藏的,只有在滚动的时候才出现,但是对于完美主义者的前端攻城狮来说是不可容忍的;
  2. 隐藏滚动条:
    首先我想到的是使用 ::-webkit-scrollbar{display:none;} 对滚动条进行隐藏,这样会导致页面中所有的滚动条都隐藏掉,显然这样一刀切的做法太激进;

WC 是一个产生灵感的好场所,五分钟之后我想到了解决方法:将 ul 的高度增加,外层 div 高度不变,并使用 overflow:hidden; 对超出部分隐藏;这样就间接的解决了隐藏滚动条的问题;

发表评论

回到顶端