js自动滚动+滑动+点击功能

写在前面的唠叨：

最近遇到一个需求是进来要自动滚动，滚动的同时可以上下滑动，还可以点击里面的元素
，要求滑动和点击后都还可以继续滚动，滚动到最下面就停

试过几个插件，大部分都是用的定位的top控制。

这就导致了在自动滚动一段距离后（假设当前的top是20px），往上滑动时最上也就是20的位置，20之前的滑不到（当然你也可以去试着改变top值，刚想到的。。。）

结果就是自己写了一份↓

准备

如图所示，有6个长600px，高400px，margin为20px的矩形，加起来的高度超过了屏幕可视高度，可以滚动了

因为设置top不好滚动，所以我用的是scrollTop

话不多说，直接上代码

HTML

page1是外面的框（蓝色部分），高度是固定的

page_in是里面包含6个div（绿色）的框，高度随着里面div的高度和个数变化

page1的高度 < page_in的高度，所以才可以滚动

<div class="page page1">
	<div class="page1_in">
		<div class="page1_div" id="page1_div0">0</div>
		<div class="page1_div" id="page1_div1">1</div>
		<div class="page1_div" id="page1_div2">2</div>
		<div class="page1_div" id="page1_div3">3</div>
		<div class="page1_div" id="page1_div4">4</div>
		<div class="page1_div" id="page1_div5">5</div>
	</div>
</div>

CSS

不重要，只需要让page1的高度 < page_in的高度就行

.page {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.page1{
	background: #1567DE;
	overflow: scroll;
	position: relative;
}
.page1_in{
	width: 100%;
	height: auto;
	position: relative;
}
.page1_div{
	width: 600px;
	height: 400px;
	background: #5adc52;
	margin: 1.25rem;
	line-height: 400px;
	font-size: 60px;
	text-align: center;
	font-weight: bold;
}

JS

<!-- jq文件引入自己常用的就行，路径自己改哦-->
<script src="js/jquery-3.1.1.js"></script>
	
<script>
	
	window.onload = function(){
		console.log("孩儿们，滚起来！");
		
		var out_h = $(".page1").height();
		var in_h = $(".page1_in").height();
		//console.log("out_h : "+ out_h);
		//console.log("in_h : "+ in_h);
		
		//看应该向上滚动的距离是多少
		var D_value = in_h - out_h;
		console.log("D_value : "+ D_value);
		
		//实际滚动的距离（现在是0）
		var top_num = $(".page1").scrollTop();
		//console.log("top_num : "+top_num);
		
		//滚动的函数
		function scrollGo(){
			top_num += 10;
			$(".page1")[0].scrollTo(0,top_num);
			//console.log($(".page1").scrollTop());
			if( top_num >= D_value ){
				clearInterval(scroll_go);
				$(".page1")[0].scrollTo(0,D_value);
				return;
			}
		}
		//开始滚动的定时器
		var scroll_go = setInterval(scrollGo,100);
		//监听滑动方向
		$(".page1").on("touchstart", function(e) {
		　　e.preventDefault();
			startX = e.originalEvent.changedTouches[0].pageX,
		　　startY = e.originalEvent.changedTouches[0].pageY;
		});
		//这里有区分四个方向的，上下左右，这块的判断是找的别人写的直接套进来的，本文只用到了上滑下滑
		$(".page1").on("touchmove", function(e) {
		　　　　e.preventDefault();
		　　　　moveX = e.originalEvent.changedTouches[0].pageX,
		　　　　moveY = e.originalEvent.changedTouches[0].pageY,
		　　　　X = moveX - startX,
		　　　　Y = moveY - startY;
		　　　　if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
		　　　　　　console.log("往右滑");
		　　　　}else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
		　　　　　　console.log("往左滑");
		　　　　}else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
		　　　　　　 console.log("往下滑");
					clearInterval(scroll_go);//先停止定时器
					top_num -= Y;
					if(top_num <= 0){//到头了，停止移动
						top_num = 0;
						$(".page1")[0].scrollTo(0,0);
					}else{
						$(".page1")[0].scrollTo(0,top_num);//否则根据滑动而移动
					}
					console.log("此时的位移 ："+ top_num);
		　　　　}else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
		 　　　　　  console.log("往上滑");
					clearInterval(scroll_go);
					top_num -= Y;
					if(top_num >= D_value){//到尾了，停止移动
						top_num = D_value;
						$(".page1")[0].scrollTo(0,D_value);
					}else{
						$(".page1")[0].scrollTo(0,top_num);
					}
					console.log("此时的位移 ："+ top_num);
		　　　　}
		});
		$(".page1").on("touchend", function(e) {//停止滑动继续滚动（如果没到最后的话）
		　　scroll_go = setInterval(scrollGo,100);
		});
		
		//监听点击了哪个块
		$(".page1_div").on("touchstart", function(e) {
		　　e.preventDefault();
			startX = e.originalEvent.changedTouches[0].pageX,
		　　startY = e.originalEvent.changedTouches[0].pageY;
		});
		$(".page1_div").on('touchend',function(e){
		    e.preventDefault();
	　　　　 moveEndX = e.originalEvent.changedTouches[0].pageX,
	　　　　 moveEndY = e.originalEvent.changedTouches[0].pageY,
	　　　　 X = moveEndX - startX,
	　　　　 Y = moveEndY - startY;
			
			//获取一下这个块的下标
			var this_index = $(this).attr("id").split("div")[1];
			this_index = parseInt(this_index);
			console.log("this_index : "+this_index);
			
			
			if( X == 0 && Y == 0 ){//点击（未滑动）
				console.log("点击了绿色块" + this_index);
			}
		})
		
		
	}
		
</script>

这样就可以了