HTML 下拉刷新&禁止微信下拉

.gd{ transition: all .5s; -moz-transition: all .5s; /* Firefox 4 */ -webkit-transition: all .5s; /* Safari 和 Chrome */ -o-transition: all .5s; /* Opera */ } <div id="top" class="gd" style="display: none;"> <span class="loading"> 上拉加载</span> <div class="load gd" style="display: none;" > <div style="display:flex;justify-content: center;align-items: center;height:0.8rem;"> <img style="width:0.3rem;" src="/static/mobile/images/weibo/load.gif" alt=""> &nbsp;加载中 </div> </div> </div> $(document).ready(function(){ var is_tap = false; var top = 0; var end = 0; var h = 0; var is_shuaxin = false; var max_h = window.screen.height*0.1 var touchstartY; $("#data").on('touchmove', function(e) { if($(document).scrollTop() == 0 && is_tap == true && data.page == 1){ end = e.changedTouches[0].clientY; h = (end-top)/2; if( h > max_h){ h = max_h; is_shuaxin = true; } $('#top').removeClass('gd'); $('#top').attr('style','display: flex;align-items: center;align-items: center; justify-content: center; color:#999;'); $('.loading').show(); $('.load').hide(); $('#top').css('height',h+"px"); }else{ is_tap = false; $('#top').hide(); } var events = e.touches[0] || e; //注意app.scrollTop始终为0 var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; //获取滚动部分的高度 var clientHeight = document.documentElement.clientHeight; //获取手机屏幕高度（可视部分高度） var scrollHeight = document.scrollHeight; //所有内容的高度 if ( events.clientY > touchstartY && scrollTop === 0 && e.cancelable ) { e.preventDefault(); //禁止到顶下拉 } else if ( scrollTop + clientHeight > scrollHeight && e.cancelable ) { // event.preventDefault(); //禁止到底上拉 } }); $("#data").on('touchstart', function(e) { if($(document).scrollTop() == 0 && data.page == 1 ){ is_tap = true; top = e.changedTouches[0].clientY; } var events = e.touches[0] || e; touchstartY = events.clientY; //获取触摸目标在视口中的y坐标 }); $("#data").on('touchend', function(e) { if($(document).scrollTop() == 0 && data.page == 1 ){ is_tap = false; $("#top").attr('class','gd'); if(is_shuaxin == true && data.page == 1){ $('#top').css('height',"0.8rem"); }else{ $('#top').css('height',"0px"); } } }); $('#top').on('webkitTransitionEnd', function(e) { $(".loading").hide(); $('.load').show(); if(is_shuaxin == true){ //加载逻辑 } }else{ $('#top').hide(); } });