移动端h5禁用浏览器左滑右滑的前进后退功能

Posted 2021-03-21 juice-war

在项目运行过程中发现，用户在有左右滑动前进后退的功能的浏览器上签字时，偶然触发了前进后退会导致canvas像是重置了一样内容消失，所以需要在代码中处理这种情况。

基本原理就是在touchmove事件中阻止默认事件，使浏览器不会触发前进后退事件，但是也会无法触发scroll事件让页面正常滚动，后续如何让页面能正常滚动就会有多种思路。

参考https://www.cnblogs.com/Miracle-ZLZ/p/7852421.html文中第5点推荐使用IScroll，但看了一下github发现太久没有更新了，我就用了基于IScroll的better-scroll，文档：https://better-scroll.github.io/docs/zh-CN/guide/base-scroll.html

在 BetterScroll 2.0 的设计当中，我们抽象了核心滚动部分，它作为 BetterScroll 的最小使用单元，压缩体积比 1.0 小了将近三分之一，往往你可能只需要完成一个纯粹的滚动需求，那么你只需要引入这一个库，方式如下：

npm install @better-scroll/core@next --save

import BScroll from '@better-scroll/core'
const bs = new BScroll('.div')

这是文档中核心滚动的介绍，非常轻量，非常适合我们只是简单的想要解决浏览器左右滑动前进后退这一问题，具体用法可以参考文档。

完结