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

在项目运行过程当中发现,用户在有左右滑动前进后退的功能的浏览器上签字时,偶然触发了前进后退会致使canvas像是重置了同样内容消失,因此须要在代码中处理这种状况。javascript

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

参考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.htmljava

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

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

这是文档中核心滚动的介绍,很是轻量,很是适合咱们只是简单的想要解决浏览器左右滑动前进后退这一问题,具体用法能够参考文档。github

完结npm

相关文章
相关标签/搜索