1 #wrapper{
2 position:fixed;
3 /* top:4.5rem;*/
4 top:2.25rem;
5 left:0;
6 width:100%;
7 line-height: 2rem;
8 height: 2rem;
9 overflow:hidden;
10 z-index: 9;
11 background: white;
12 border-bottom: 1px solid #E5E5E5;
13 }
14 .category_nav{
15 white-space:nowrap;
16 }
17 .category_nav li{
18 display: inline-block;
19 }
20 .category_nav li a{
21 display: inline-block;
22 padding: 0 .5rem;
23 }
View Code
1 <div id="wrapper">
2 <ul class="category_nav">
3 <li class="title_active">
4 <a>综合</a>
5 </li>
6 <li>
7 <a>新闻资讯</a>
8 </li>
9 <li>
10 <a>讲师</a>
11 </li>
12 <li>
13 <a>课程</a>
14 </li>
15 <li>
16 <a>视频</a>
17 </li>
18 <li>
19 <a>试卷</a>
20 </li>
21 </ul>
22 </div>
1 // 首页导航条滚动
2 var all_width = document.getElementsByClassName('category_nav')[0].scrollWidth
3 $('.category_nav').css({
4 'width':all_width + 'px'
5 })
6 var myscroll=new iScroll("wrapper",{
7 scrollX: true,
8 scrollY: false,
9 hScrollbar:false,
10 vScrollbar : false,
11 vScroll:false
12 })
对于iscroll 配置 一定要正确 最重要的一条是 滚动容器的宽度要明确设置 如果不设置滚动容器的宽度,滚动容器宽度为屏幕宽度,容器不会被滑动
此处 加一个大牛 博客链接 http://brizer.top/ 网易前端大牛 博客中记载了好多前端常用特效以供查阅
