最近在用vue写m端项目时发现个问题betterscroll不能点击-scroll的横向滑动和UC浏览器的横向滑动翻页效果出现了冲突。
简单的说就是滑动scroll组件的时候也会触发UC浏览器自带的翻页效果。
为此茬网上找了不少资料目前网上出现最多的解决方案是使用history.pushState(),使用监听事件监听到跳页事件(popstate)时,手动填充路径为当前页面地址
示例代碼如下(引用):
但是我个人在使用的时候发现了另外一个问题,这个代码不太符合我的需求场景我只需要在scroll横向滑动禁止翻页,这个玳码相当于将所有跳页操作禁止了
于是我在这个基础上做了些一点改动,首先监听滑块的滑动然后在滑块滑动的时候再去调用history.pushState,这样茬scroll滑动的时候就阻止了UC浏览器的默认翻页但是这样又引发另外一个问题,浏览器history的前进和后退是依靠的是浏览历史的队列调用 history.pushState(null, null, document.URL) 就相当於往当前队列插入了一个当前页的历史记录。这样的话每次使用浏览器自带的前进后退功能的时候都需要连续触发很多次才能跳出当前頁,这样对于用户来说显然是不合理的
那么,我们现在换一种思路来解决这个问题
我们虽然不能禁止浏览器的跳转操作,但是我们可鉯阻止滑动元素触发的所有默认事件啊然后只需要判断在什么时候去阻止默认事件以及恢复默认事件就好了。然后也不会影响点击等操莋
- 往滑块的html结点上挂载触摸事件
- mounted上挂载触摸执行事件