本文实例为大家分享了javascript禁止微信浏览器下拉回弹的效果,供大家参考,具体内容如下
方法1:
<script type="text/javascript"> var overscroll = function(el){ el.addeventlistener('touchstart', function(){ var top = el.scrolltop; var totalscroll = el.scrollheight; var currentscroll = top + el.offsetheight; if(top === 0) { el.scrolltop = 1; }else if(currentscroll === totalscroll){ el.scrolltop = top - 1; } }); el.addeventlistener('touchmove', function(evt){ if(el.offsetheight < el.scrollheight){ evt._isscroller = true; } }); } overscroll(document.queryselector('.scroll'));//哪里需要可以局部滚动,添加一个“scroll”的class document.body.addeventlistener('touchmove', function(evt) { if(!evt._isscroller){ evt.preventdefault(); } }); </script>
此方法的优缺点:
优点:支持局部滚动;
缺点:浏览器本身超出页面出现的滚动被禁用掉了,需要改为局部滚动,且局部滚动的地方需要加“scroll”的class。
注:如果同一个页面多个局部滚动,需要将
overscroll(document.queryselector('.scroll');
改为
for(var i=0;i<document.queryselectorall('.scroll').length;i++){
overscroll(document.queryselectorall('.scroll')[i]);
}
方法2:
<script type="text/javascript"> function stopdrop(){ var lasty;//最后一次y坐标点 $(document.body).on('touchstart', function(event) { lasty = event.originalevent.changedtouches[0].clienty;//点击屏幕时记录最后一次y度坐标。 }); $(document.body).on('touchmove', function(event) { var y = event.originalevent.changedtouches[0].clienty; var st = $(this).scrolltop(); //滚动条高度 if (y >= lasty && st <= 10) {//如果滚动条高度小于0,可以理解为到顶了,且是下拉情况下,阻止touchmove事件。 lasty = y; event.preventdefault(); } lasty = y; }); } </script>
此方法的优缺点:
优点:支持浏览器本身超出页面的滚动
缺点:不支持局部滚动
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json?Protocol Buffer?FlatBuffers?
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论