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

在微信网页开发中,我使用的页面结构是在body下的container覆盖全屏,container下有个header和page的容器,page负责显示所有内容并实现滚动。

结构如图:

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

查阅文献后,我准备在touchstart和touchmove上做些处理。

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

doctype html
html
    head
        title 微信拖动测试
        meta(charset="utf-8")
        meta(name="viewport", content="initial-scale=1, maximum-scale=1, minimum-scale=1")
        link(rel=‘stylesheet‘, href=‘/stylesheets/style.css‘)
        script(src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js")
    body
        #container
            .header
                | header
            .page
                .box box1 in page
                .box box2 in page
                .box box3 in page
                .box.bottom box4 in page
    script.
        $(function() {
            var startY, endY;
            var box_height = $(‘#container‘).height();
            $(‘.page‘).on(‘touchstart‘, function(event) {
                event.stopPropagation();
                startY = event.touches[0].pageY;
            });
            $(‘.page‘).on(‘touchmove‘, function(event) {
                event.stopPropagation();
                var endY = event.changedTouches[0].pageY;
                var changedY = endY - startY;
                var scroll_top = $(‘.page‘).scrollTop();          // 判断是否在顶部,且向下拖动
                if (scroll_top === 0 && changedY > 0) {
                    event.preventDefault();
                }
          // 判断是否在底部,且向上拖动
                var o = $(‘.bottom‘).offset();
                if (o.top + o.height === box_height && changedY < 0) {
                    event.preventDefault();
                }
            });       // header禁止拖动
            $(‘.header‘).on(‘touchmove‘, function(event) {
                event.preventDefault();
            });
        });

样式如下:

*{
    padding: 0;
    margin: 0;
}
#container{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #efefef;
    color: #fff;
    text-align: center;
    font-size: 40px;
}
.header{
    position: absolute;
    left: 0;
    right: 0;
    height: 80px;
    line-height: 80px;
    background-color: #ddd;
}
.page{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 80px;
    background-color: #ccc;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.page > *{
    z-index: 1;
}
.box{
    width: 100%;
    height: 300px;
    line-height: 300px;
    box-sizing: border-box;
    border-bottom: 2px solid #fff;
}
时间: 2024-10-07 06:13:33

防止微信浏览器被整体拖动的方法的相关文章

微信浏览器禁止下载的处理方法-跳转外部浏览器打开

通过扫描二维码下载APP已成为一个非常方便的方式,微信也成为扫描二维码重要的工具,但是扫描后微信浏览器会对APK和appStore的链接进行屏蔽,导致用户无法正常下载. 提供解决方案:1.安卓用户点击直接跳转到默认浏览器打开,IOS用户提示浏览器打开 再也不用管微信如何的更新,直接判断微信的ua,然后根据机型判断在浏览器中打开下载.并且不加关闭的按钮. 实例演示地址 月牙跳转是一款基于微信后端开发了一款微信营销下载推广助手,使用了本插件生成的链接,用户在微信任意环境下点击链接或者扫描二维码,可以

微信浏览器禁止下载的处理方法-跳转浏览器打开

通过扫描二维码下载APP已成为一个非常方便的方式,微信也成为扫描二维码重要的工具,但是扫描后微信浏览器会对APK和appStore的链接进行屏蔽,导致用户无法正常下载. 提供解决方案:1.安卓用户点击直接跳转到默认浏览器打开,IOS用户提示浏览器打开 再也不用管微信如何的更新,直接判断微信的ua,然后根据机型判断在浏览器中打开下载.并且不加关闭的按钮. 旋风微跳是一款基于微信后端开发了一款微信营销下载推广助手,使用了本插件生成的链接,用户在微信任意环境下点击链接或者扫描二维码,可以实现直接跳转手

H5 网站支付宝支付(前端部分)包含微信浏览器中的处理方法。

手机网站唤起支付宝支付: H5 网站实现支付宝支付是一个很常见的需求: 实现方式主要是在后台配置和预支付, 前端需要做的就是唤起 支付宝App 然后就可以输入密码支付. 这个其实难度很低, 主要就是在后台返回的签名加上支付宝给的 基本访问前缀 拼接 URL 然后通过方法 window.location.href 方法打开拼接后的 URL 即可唤起支付宝支付. 微信浏览器打开网站使用支付宝支付: 这个比较坑爹,微信浏览器会当掉 支付宝的 URL 链接,只能去浏览器中打开就可 1.一般直接通过 wi

微信浏览器禁止app下载的两种处理方法

通过扫描二维码下载APP已成为一个非常方便的方式,微信也成为扫描二维码重要的工具,但是扫描后微信浏览器会对APK和appStore的链接进行屏蔽,导致用户无法正常下载. 提供解决方案:1.使用腾讯应用宝:2.提示用户使用浏览器打开;3.外跳工具 参考了前端开发博客的一篇文章以及进行了改动.采用方案:弹出一个遮罩提示用户在新的浏览器窗口打开.原文链接:http://caibaojian.com/weixin-tip.html 再也不用管微信如何的更新,直接判断微信的ua,然后弹出一个遮罩提示用户在

微信浏览器中禁止app下载链接的两种处理方法

通过扫描二维码下载APP已成为一个非常方便的方式,微信也成为扫描二维码重要的工具,但是扫描后微信浏览器会对APK和appStore的链接进行屏蔽,导致用户无法正常下载. 提供解决方案:1.使用腾讯应用宝:2.提示用户使用浏览器打开;3.外跳工具 参考了前端开发博客的一篇文章以及进行了改动.采用方案:弹出一个遮罩提示用户在新的浏览器窗口打开.原文链接:http://caibaojian.com/weixin-tip.html 再也不用管微信如何的更新,直接判断微信的ua,然后弹出一个遮罩提示用户在

微信浏览器取消缓存的方法

做微信公众号和调试手机页面的时候,避免不了页面要跳转到微信浏览器打开,调试阶段,android版微信浏览器一直都默认缓存html静态资源,每次静态资源变化甚至新内容发布的时候在微信浏览器上都极有可能不能更新,很多时候要清理微信缓存才能看到效果,很是烦人.部分客户装了QQ浏览器,微信实际调用的是QQ浏览器,有时候甚至光清理微信缓存都无效,QQ浏览器的缓存也要清. 经过一番探索微信浏览器确实是在webview的上层做的缓存:就是如果请求过了这个地址,就会存在本地,之后不取线上了. 解决方案是在调试阶

微信浏览器禁止app下载链接的两种处理方法

最近替朋友放一个微信下载链接,通过二维码扫描下载. 通过扫描二维码下载APP已成为一个非常方便的方式,微信也成为扫描二维码重要的工具,但是扫描后微信浏览器会对APK和appStore的链接进行屏蔽,导致用户无法正常下载. 提供解决方案:1.使用腾讯应用宝:2.提示用户使用浏览器打开. 参考了前端开发博客的一篇文章以及进行了改动.采用方案:弹出一个遮罩提示用户在新的浏览器窗口打开.原文链接:http://caibaojian.com/weixin-tip.html 再也不用管微信如何的更新,直接判

H5版如何在微信外(非微信浏览器)进行微信支付技术方案

官方是支持在非微信内置浏览器中调起微信支付的!H5支付是基于公众号基础开发的一种非微信内浏览器支付方式(需要单独申请支付权限),可以满足在微信外的手机H5页面进行微信支付的需求.同时,由于H5链接传播十分方便.来源不易追踪,商户需要特别注意做好防钓鱼.防刷单的处理,控制风险. 流程原理 接口说明 (1)用户打开商户H5网页选购商品,生成支付订单:(2)商户调用[统一下单]接口(接口中trade_type需定义为WAP),获得预支付交易会话标识prepayid:(3)商户按照微信H5支付协议生成d

微信浏览器跳转页面后再返回,如何恢复到跳转前的位置的问题。

以商品列表页打比方, 众所周知,点击商品进入详情页要保证不损坏当前列表页状态的做法通常是在a标签上加上target=_blank进行新开一个窗口打开详情页 这个做法是非常普遍的,包括很多很多牛叉的网站都是这么玩的. 但是在微信浏览器里行不通  因为微信浏览器只有一个窗口   无论任何形式的跳转它都会销毁当前窗口的内容链接新的页面 所以不管是什么target=_blank啊还是什么history.go(-1)啊  统统都会强制刷新重新渲染页面 因为我是干PHP的,所以面对这个问题第一想到的就是用c