办理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 = $('.container').scrollTop() // 如果拉到顶了还继续往下拉 if(diff > 0 && scrollTop |