iscroll水平滑动小案例

最新推荐文章于 2021-09-15 10:57:57 发布

weixin_34261415

最新推荐文章于 2021-09-15 10:57:57 发布

阅读量278

点赞数

文章标签： python

原文链接：https://my.oschina.net/shuaihong/blog/1586945

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=0">
	<title>Document</title>
	<style>
		ul { background-color: red; width: 600px;}
		li { list-style: none; width: 80px; display: inline-block;}
	</style>
	<script src="iscroll.js"></script>
	<script src="jquery.min.js"></script>
</head>
<body>
	<div id="wrapper">
        <ul class="category_nav">
            <li class="title_active">
               <a>综合</a>
            </li>
            <li>
           		<a>新闻资讯</a>
            </li>
	        <li>
	           <a>讲师</a>
	        </li>
			<li>
				<a>课程</a>
			</li>
	        <li>
	            <a>视频</a>
	        </li>
	        <li>
	            <a>试卷</a>
	        </li>
     	</ul>
	</div>
	<script>

	var all_width = document.getElementsByClassName('category_nav')[0].scrollWidth
		 $('.category_nav').css({
		     'width':all_width + 'px'
		 })
		 var myscroll=new iScroll("wrapper",{
		     scrollX: true,  
		     scrollY: false, 
		     hScrollbar:false,
		     vScrollbar : false,
		     vScroll:false
		})
	</script>
</body>
</html>

转载于:https://my.oschina.net/shuaihong/blog/1586945