防止微信H5下拉出现域名究极解决方案

背景：最近在微官网项目时，有一个优化问题，需要阻止微信H5页面下滑时背景出现域名，在网上查到的解决方法大多数是直接阻止掉touchmove的默认事件，如下：

document.addEventListener('touchmove', function (evt) {evt.preventDefault()
}, { passive: false })

这样确实阻止掉了touchmove的默认事件，但如果页面中有元素需要滚动，而这个滚动又是基于overflow属性进行设置的，那这个滚动同样也就不能触发了。
然后呢，又在网上一通搜索，发现可以针对性的对元素阻止touchmove默认事件，
如下：

var overscroll = function(el) {el.addEventListener('touchstart', function() {var top = el.scrollTop, totalScroll = el.scrollHeight, 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;});
}

//下面一行代码就是防止元素被禁用掉touchmove的默认事件的，对于通过使用overflow进行滑动的元素使用

overscroll(document.querySelector('.scroll'));
document.body.addEventListener('touchmove', function(evt) {if(!evt._isScroller) {evt.preventDefault();}
})

以上方法可行，很不错，但对于一个已经成型的项目，且有大量元素使用overflow进行滚动的项目来说，要去进行一一排查，工作量无疑是大的，且有可能会有遗漏的元素。
因此，我再以上的基础上，对这个方法进行了完善。

//该方法用来遍历元素，遍历至根元素，查看每一个元素上的overflow属性是否设置滚动，
//针对设置了滚动的元素调用overscroll方法
function toRoot (dom) {const isScroll = window.getComputedStyle(dom, null).overflow// console.log(isScroll, dom)if (dom.className === 'el-table__fixed') {return}if (isScroll.includes('auto') || isScroll.includes('scroll')) {overscroll(dom)// return}if (dom.getAttribute('id') === 'app') {return}if (dom.tagName === 'BODY') {return}toRoot(dom.parentNode)
}
export const overscroll = function (el) {//以下属性是用来判断手指滑动的方向，毕竟有的元素只能左右滑，有的元素只能上下滑let startX, startY, moveEndX, moveEndY, X, Yel.addEventListener('touchstart', function (e) {startX = e.touches[0].pageXstartY = e.touches[0].pageYconst top = el.scrollTopconst totalScroll = el.scrollHeightconst currentScroll = top + el.offsetHeightif (top === 0) {el.scrollTop = 1} else if (currentScroll === totalScroll) {el.scrollTop = top - 1}})el.addEventListener('touchend', (e) => {moveEndX = 0moveEndY = 0})el.addEventListener('touchmove', function (evt) {if (!moveEndX && !moveEndX) {moveEndX = evt.changedTouches[0].pageXmoveEndY = evt.changedTouches[0].pageYX = moveEndX - startXY = moveEndY - startYconsole.log(X, Y, moveEndX, startX, moveEndY, startY)}if (el.offsetHeight < el.scrollHeight && Math.abs(Y) > Math.abs(X)) {evt._isScroller = true}if (el.offsetWidth < el.scrollWidth && Math.abs(X) > Math.abs(Y)) {evt._isScroller = true}})
}
document.addEventListener('touchstart', function (evt) {const isScroll = window.getComputedStyle(evt.target, null).overflowconst dom = evt.targetif (isScroll.includes('auto') || isScroll.includes('scroll')) {overscroll(dom)return}toRoot(dom.parentNode)
}, { passive: false })
document.addEventListener('touchmove', function (evt) {if (!evt._isScroller) {evt.preventDefault()}
}, { passive: false })

将以上代码，用在项目的main.js中，即可解决掉微信H5下拉出现域名的问题，当然，这个方法好像也不能完全的阻止下拉出现域名的问题，当页面未加载完，或者连续快速滑动时，也会导致，但能够极大的减少95%的下拉问题。

ps：如有不足和优化，请在评论区指出

防止微信H5下拉出现域名究极解决方案相关推荐

微信浏览器下拉黑边的终极解决方案---wScroollFix
开始由于在开发微信页面的时候下拉黑边的情况很常见,有时候会比较影响体验,因此开发了wScrollFix库,用于隐藏微信下拉的黑边问题 npm地址 github地址什么是黑边相信很多在微信上面做网 ...
优雅的H5下拉刷新【minirefresh】
序严格的来说,这是我第一个完全投入的开源项目,它的出现是为了统一移动H5中的下拉刷新,想通过一套框架,多主题拓展方式,适应于任意需求下的任意下拉刷新场景. 另外,这个项目作为独立项目存在,希望能有更 ...
html游戏禁止微信浏览器下拉,JavaScript实现禁止微信浏览器下拉回弹效果
这篇文章主要为大家详细介绍了JavaScript禁止微信浏览器下拉回弹效果的方法,具有一定的参考和学习JavaScript的价值,对JavaScript感兴趣的小伙伴们可以参考一下本篇文章本文实例为 ...
html 禁止页面回弹,JavaScript禁止微信浏览器下拉回弹效果
本文实例为大家分享了JavaScript禁止微信浏览器下拉回弹的效果,供大家参考,具体内容如下方法1: var overscroll = function(el){ el.addEventListe ...
【Python与SEO】搜狗微信搜索下拉框词采集多线程/异步采集源码公布
随意写了一下,更多可关注本渣渣微信公众号:二爷记!! 欢迎与本渣渣交流!!! 运行效果: 搜狗微信搜索下拉框词采集核心代码参考: #微信搜索下拉词采集 #首发:微信公众号:二爷记 #author:微信 ...
android 微信回弹,完美解决safari、微信浏览器下拉回弹效果。
完美解决safari.微信浏览器下拉回弹效果,只保留局部回弹效果. CSS代码 .box{ overflow: auto; -webkit-overflow-scrolling: touch; } H ...
谈谈微信首页下拉拍摄小视频功能
时间回到2014年,此刻你就是一名光荣的微信产品经理,在此前一年Twitter旗下短视频分享应用Vine已经风靡了美国,而国内以美拍为代表的国内学徒也是搅得风声水起.此刻核心功能为移动即时通讯的微信, ...
Android仿微信首页下拉显示小程序列表
花点时间重新熟悉一下AndroidUI方面的东西,把古董PullToRefreshView又撸了一遍,技术这种东西真是忘得快啊...在基础上新增一点东西,粗糙地实现了仿微信首页下拉显示小程序列表的样式 ...
iOS 微信右上角下拉菜单效果之CMPopTipView,各种角度各种位置
早之前在项目中写了一个类似微信右上角下拉的菜单封装,但是是写死的,当时根本没有考虑到去其他地方弹出这个东西,虽然看起来弹个窗出来很简单,但是你位子不确定之后弹出来是有点麻烦的,反正我总是觉得,我们能想 ...

防止微信H5下拉出现域名究极解决方案

防止微信H5下拉出现域名究极解决方案相关推荐

最新文章

热门文章