请选择 进入手机版 | 继续访问电脑版

h5 ios 滑动白屏(h5滑动和webview 滑动动作冲突)

[复制链接]
谭先生 发表于 2021-1-1 18:29:42 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
办理h5页面在ios设备上下拉显示下层白屏 或者 局部下拉触发页面webview下拉 导致局部下拉失效,颠末整理,发现了两种可行方案,一种是给整个页面设置position:fixed 另一种是克制页面touch事件document.body.addEventListener('touchmove', function (e) { if(e._isScroller) return; e.preventDefault(); }, {passive: false});
以上两种方式都可以办理下来空缺下显示。
但是如果是页面局部有滚动效果,点击或者滑动外层造成内部滑动是失效,需点击页面滚动区域才气滑动。那么办理办法也是基于上面两个因素,不过要多做一些监听。下面以position:fixed 方法为例(动态给页面赋值浮动去除页面可滑动效果):
[code]       整个背景 或者 其他你滑动会触发页面滑动造成空缺的元素   
页面滚动区域
<script>data(){        return{             fixed: false,         contentStartY: 0        }},methods: {    headerTouchStart(e) {        // 固定元素滑动,浮动起来        this.fixed = true      },      headerTouchMove(e) {        // 组织默认事件,防止跳动        e.preventDefault();      },      headerTouchEnd(e) {        // 互动竣事,浮动排除,防止滚动元素无法滚动        this.fixed = false      //  this.$refs.a.scroll(0, 0)      },      contentTouchStart(e) {        this.contentStartY = e.changedToches[0].clientY;      },      contentTouchMove(e) {        let endY = e.changedToches[0].clientY;        // 获取滚动的隔断        let diff = endY - this.contentStartY;        let scrollTop = $(&#39;.container&#39;).scrollTop()        // 如果拉到顶了还继续往下拉        if(diff > 0 && scrollTop
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )