移动端触摸上拉隐藏指定模块内容，有过度效果（同时页面iscroll滚动）

应用场景：触碰屏幕进行上拉隐藏指定模块内容，有过度效果；在滚动到第一条内容的时候，才可以进行下拉重新出现该模块内容。

style样式：

*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
html,body{
100%;
height: 100%;
position: relative;
font-size: 16px;
}

body体代码：

<div class="pageContent" id="pageContent" style="overflow:hidden; 100%;height:100%;position: relative;">
<div class="pageContent_box" style="height: 100%;">
<!--第一部分-->
<div class="first" style=" 100%;height: 20%;background: #EEEEEE;text-align: center;">
<img src="../img/advance.png" style=" 50%;height: 100%;"/>
</div>

<!--第二部分-->
<div class="second" style=" 100%;height: 20%;background: #DDDDDD;position: absolute;top: 22%;"></div>


<!--第三部分-->
<div class="third" id="third" style=" 100%;height: 56%;background: #DCDCDC;position: absolute;top: 44%;transition: top 0.15s;">
<div class="third_box">
<div class="third_contents">
<div>內容</div><div>內容</div><div>內容</div><div>內容</div><div>內容</div>
<div>內容</div><div>內容</div><div>內容</div><div>內容</div><div>內容</div>
<div>內容</div><div>內容</div><div>內容</div><div>內容</div><div>內容</div>
<div>內容</div><div>內容</div><div>內容</div><div>內容</div><div>內容</div>
<div>內容</div><div>內容</div><div>內容</div><div>內容</div><div>內容</div>
<div>內容</div><div>內容</div><div>內容</div><div>內容</div><div>內容</div>
<div>內容</div><div>內容</div><div>內容</div><div>內容</div><div>內容</div>
<div>內容</div><div>內容</div><div>內容</div><div>內容</div><div>內容</div>
<div>內容</div><div>內容</div><div>內容</div><div>內容</div><div>內容</div>
<div>內容</div><div>內容</div><div>內容</div><div>內容</div><div>內容</div>
<div>內容</div><div>內容</div><div>內容</div><div>內容</div><div>內容</div>
<div>內容</div><div>內容</div><div>內容</div><div>內容</div><div>內容</div>
<div>內容</div><div>內容</div><div>內容</div><div>內容</div><div>內容</div>
<div>內容</div><div>內容</div><div>內容</div><div>內容</div><div>內容</div>
</div>
</div>
</div>
</div>
</div>

script代码：需要引入jq和iscroll.js

var myScroll;
var myScroll2;
var startx, starty, all_y, endX, endY, distanceX, distanceY;
var isdown = true;//当内容滚动到第一条的时候才可以进行下滑出现原有内容
$(function() {
touch();//监听上划事件
})

//监听上划事件
function touch(){
//手指接触屏幕
$('body').bind('touchstart',function(e){
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
all_y = startY;
});
$('body').bind('touchmove',function(e){
//获取滑动屏幕时的X,Y
endX = e.originalEvent.changedTouches[0].pageX,
endY = e.originalEvent.changedTouches[0].pageY;
//获取滑动距离
distanceX = endX-startX;
distanceY = endY-startY;
//判断滑动方向
if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX>0){
// alert('往右滑动');
}else if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX<0){
// alert('往左滑动');
}else if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY<0){
// alert('往上滑动');
if($(".first").height()>0){
$(".first").stop().animate({transform:"scaleY(0)"},150);
$(".first").stop().animate({height:"0"},150);
$(".second").stop().animate({top:"0"},150);
$(".third").css("height","78%");
$(".third").css("top","22%");

if(myScroll){
myScroll.destroy();myScrollInit();//初始化动态信息列表滚动
}else{
myScrollInit();//初始化动态信息列表滚动
}
}
}else if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY>0){
if($(".first").height()<=0 && isdown==true){
$(".first").stop().animate({transform:"scaleY(1)"},150);
$(".first").stop().animate({height:"20%"},150);
$(".second").stop().animate({top:"22%"},150);
$(".third").css("height","56%");
$(".third").css("top","44%");
}
}

});
}


function myScrollInit(){

myScroll = new iScroll("third",{
mouseWheel:true,
click: true,
taps: true,
onScrollMove:function(){

},
onScrollEnd:function(){

if(Math.abs(this.y)<=50){//当内容滚动到第一条的时候才可以进行下滑出现原有内容
if(isdown==true) return;
isdown = true;
}else{
if(isdown==false) return;
isdown = false;
}
touch();
},
onRefresh:function(){
}
})

if($("#third").height()>$(".third_box").height()){
myScroll.destroy();
}
}

想查看具体的页面效果可以至百度云下载查看：

链接：https://pan.baidu.com/s/1WXLULJAG7PUvdik8S679-Q
提取码：yxt7