JavaScript中防止微信浏览器被整体拖动的方法

在微信网页开发中，我使用的页面结构是在身体下的容器覆盖全屏容器下有个页眉和页，面，张，版的容器，第页负责显示所有内容并实现滚动。

结构如图：

但是遇到了一个问题：在页面已经滚动到顶部时，继续往下拖动页，面，张，版容器，会将微信浏览器整体往下拖，漏出"该网页由XXX提供"的提示，然后在安卓下，影响并不大，但是在苹果手机下，就没那么简单了，经过测试，在苹果下，往下拖动后快速滑动页面中的一页，一页并不会滚动，上拖同样遇到了这个问题，非常影响体验。

查阅文献后，我准备在touchstart和触摸移动上做些处理。

思路是当页，面，张，版页面滚动到顶部时，再向下拖动会阻止默认的拖动事件，第页页面到底后也阻止向上拖动。结构与代码如下

doctype html

超文本标记语言标题微信拖动测试meta(charset=' utf-8 ')meta(name=' viewport '，content='initial-scale=1，maximum-scale=1，minimum-scale=1 ')链接(rel='样式表，href='/样式表/style.css ')脚本(src=' http :http://apps。bdimg。com/libs/zepto/1。1 .4/zepto。量滴js’)主体#容器.页眉|页眉。佩奇。第一页的方框1。第页的方框2。页面脚本中的方框3。盒子。底部方框4 .$(function() { var startY，endYvar box _ height=$(' # container ').高度();$('.第)页on('touchstart '，函数(event){ event。stopperpagation()；开始=事件.接触.佩吉；});$('.第)页on('touchmove '，函数(事件){ event。stopperpagation()；var endY=事件。changed touch[0 ].佩吉；var changedY=endY-startY；var scroll_top=$(' .第)页滚动顶部()；//判断是否在顶部，且向下拖动if(scroll _ top===0 changedY 0){ event。prevent default()；} //判断是否在底部，且向上拖动var o=$(' .底部')。offset()；if(o . top o . height===box _ height changedY 0){ event。prevent default()；} });//标题禁止拖动$('.标题')。on('touchmove '，function(event){ event。prevent default()；});});样式如下：

* { padd : 0；保证金： 0；} # container { position :绝对值；左： 0；top : 0；右： 0；底部： 0；背景-color : # EFE fef；color: # fff文本对齐：中心；font-size : 40px}.表头{位置：绝对值；左： 0；右： 0；高度： 80px线高： 80px背景色： # DDD；}.第{位置：页绝对；左： 0；右： 0；底部： 0；top: 80px背景色： # CCC溢出-y:自动；-WebKit-溢出-滚动3360触摸；}.第*{ z-index: 1页；}.盒子{宽度： 100%；高度： 300像素线高： 300像素；盒子尺寸：边框盒子；边框-底部： 2px实心# fff}总结

以上所述是小编给大家介绍的Java脚本语言中防止微信浏览器被整体拖动的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！