JavaScript禁止微信浏览器下拉回弹效果-如何关闭微信下拉功能-微信小程序动态-即速应用

JavaScript禁止微信浏览器下拉回弹效果-如何关闭微信下拉功能-微信小程序动态

浏览量：2056 时间：2020-04-06 来源：qupeng666

1.
本文实例为大家分享了JavaScript禁止微信浏览器下拉回弹的效果
2.
方法1：
scripttype"text/javascript"varoverscrollfunction(el){el.addEventListener('touchstart',function(){vartopel.scrollTop;vartotalScrollel.scrollHeight;varcurrentScrolltop+el.offsetHeight;if(top0){el.scrollTop1;}elseif(currentScrolltotalScroll){el.scrollToptop-1;}});el.addEventListener('touchmove',function(evt){if(el.offsetHeightel.scrollHeight){evt._isScrollertrue;}});}overscroll(document.querySelector('.scroll'));//哪里需要可以局部滚动，添加一个“scroll”的classdocument.body.addEventListener('touchmove',function(evt){if(!evt._isScroller){evt.preventDefault();}});/script此方法的优缺点：优点：支持局部滚动；缺点：浏览器本身超出页面出现的滚动被禁用掉了，需要改为局部滚动，且局部滚动的地方需要加“scroll”的class。注：如果同一个页面多个局部滚动，需要将overscroll(document.querySelector('.scroll');改为for(vari0;idocument.querySelectorAll('.scroll').length;i++){overscroll(document.querySelectorAll('.scroll')[i]);}3.
方法2：
scripttype"text/javascript"functionstopDrop(){varlastY;//最后一次y坐标点$(document.body).on('touchstart',function(event){lastYevent.originalEvent.changedTouches[0].clientY;//点击屏幕时记录最后一次Y度坐标。});$(document.body).on('touchmove',function(event){varyevent.originalEvent.changedTouches[0].clientY;varst$(this).scrollTop();//滚动条高度if(ylastYst10){//如果滚动条高度小于0，可以理解为到顶了，且是下拉情况下，阻止touchmove事件。lastYy;event.preventDefault();}lastYy;});}/script此方法的优缺点：优点：支持浏览器本身超出页面的滚动缺点：不支持局部滚动