欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-03-26 21:14:13
在项目运行过程中发现,用户在有左右滑动前进后退的功能的浏览器上签字时,偶然触发了前进后退会导致canvas像是重置了一样内容消失,所以需要在代码中处理这种情况。 基本原理就是在touchmove事件中阻止默认事件,使浏览器不会触发前进后退事件,但是也会无法触发scroll事件让页面正常滚动,后续如何 ......

在项目运行过程中发现,用户在有左右滑动前进后退的功能的浏览器上签字时,偶然触发了前进后退会导致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')

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

完结