移動端觸控上拉隱藏指定模組內容，有過度效果（同時頁面iscroll滾動）
應用場景：觸碰螢幕進行上拉隱藏指定模組內容，有過度效果；在滾動到第一條內容的時候，才可以進行下拉重新出現該模組內容。
style樣式：
*{
margin: 0;
padding: 0;
font-family: "微軟雅黑";
}
html,body{
width: 100%;
height: 100%;
position: relative;
font-size: 16px;
}
body體程式碼：
<div class="pageContent" id="pageContent" style="overflow:hidden;width: 100%;height:100%;position: relative;">
<div class="pageContent_box" style="height: 100%;">
<!--第一部分-->
<div class="first" style="width: 100%;height: 20%;background: #EEEEEE;text-align: center;">
<img src="../img/advance.png" style="width: 50%;height: 100%;"/>
</div>
<!--第二部分-->
<div class="second" style="width: 100%;height: 20%;background: #DDDDDD;position: absolute;top: 22%;"></div>
<!--第三部分-->
<div class="third" id="third" style="width: 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