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/ 網易前端大牛 博客中記載了好多前端常用特效以供查閱
