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

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

完结

移动端h5禁用浏览器左滑右滑的前进后退功能的更多相关文章

  1. Android SwipeToDismiss:左滑/右滑删除ListView条目Item

     <Android SwipeToDismiss:左右滑动删除ListView条目Item> Android的SwipeToDismiss是github上一个第三方开源框架(githu ...

  2. ViewPager 滑动一半的判断方法以及左滑右滑判断

    做项目的时候,会碰到用viewpager + fragments去实现多页滑动.有些时候需要完成:界面在滑动到一半或是一半以上的时候,需要把title之类的切换到下一个页面.这个时候仅仅依赖Viewp ...

  3. 让浏览器支持 jquery ajax load 前进、后退 功能

    BEGIN; 一般在做 ajax load 的时候,非常多人都不会考虑到须要浏览器支持前进后退功能,由于大部分人都不知道能够实现. 近期遇到这个问题,经过一小段研究,发现github已经有现成的开源工 ...

  4. 移动端以及 PC浏览器页面分享到朋友圈等的功能实现

    我们经常可以在一些 app上看到分享到朋友圈.微信好友.qq好友等功能,例如 饿了么.美团等 app,下单之后就会弹出给好友发红包的 modal窗,这在 app上很常见,app的权限可以很大,甚至连启 ...

  5. Taro UI开发小程序实现左滑喜欢右滑不喜欢效果

    前言:年后入职了一家新公司,与前同事交接完之后,发现公司有一个四端的项目(iOS,Android,H5,小程序),iOS和安卓都实现了左滑右滑的效果,而h5和小程序端没实现,询问得知前同事因网上没找到 ...

  6. App开发流程之右滑返回手势功能

    iOS7以后,导航控制器,自带了从屏幕左边缘右滑返回的手势功能. 但是,如果自定义了导航栏返回按钮,这项功能就失效了,需要自行实现.又如果需要修改手势触发范围,还是需要自行实现. 广泛应用的一种实现方 ...

  7. 移动端H5测试调试利器 chrome://inspect/#devices

    使用 chrome://inspect/#devices,可以使安卓手机里的WebView也能和chrome一样审查元素,调试和测试移动端H5页面. 我使用的是三星S6 (该功能支持安卓系统4.4及以 ...

  8. jquery左划出现删除按钮,右滑隐藏

    jquery左侧划出显示删除按钮,右滑动隐藏删除按钮 <!doctype html> <html> <head> <meta charset="ut ...

  9. Android滑动列表(拖拽,左滑删除,右滑完成)功能实现(1)

    场景: 近期做的TODO APP需要在主页添加一个功能,就是可以左滑删除,右滑完成.看了一下当前其他人做的例如仿探探式的效果,核心功能基本一样,但是和我预想的还是有少量区别,于是干脆自己重头学一遍如何 ...

随机推荐

  1. Sql Server 2005主机和镜像切换SQL语句

    --1.主备互换 --主机执行: USE master; ALTER DATABASE <DatabaseName> SET PARTNER FAILOVER; --2.主服务器Down掉 ...

  2. 使用HTTP代理

    HTTP代理服务器可以比作客户端与Web服务器网站之间的一个信息中转站,客户端发送的HTTP请求和Web服务器返回的HTTP响应通过代理服务器转发给对方, 爬虫程序在爬取某些网站的时候也需要使用代理, ...

  3. Elasticsearch & Kibana with Shield

    Elasticsearch & Kibana with Shield   官方网站: https://www.elastic.co/guide/en/kibana/current/produc ...

  4. PipeCAD Import IDF

    PipeCAD Import IDF eryar@163.com IDF/PCF文件是国际标准管道数据交换文件,主要用于isogen生成ISO图.目前主流设计软件都可以生成这些格式的文件,如PDMS. ...

  5. [Day3] Nginx配置Https

    一. 网络安全之Http与Https Http协议是互联网行业中设计的最好架构之一.20多年间,应用Http协议传输数据的软件越来越多,企图从http协议传输中非法获取.篡改用户重要数据的非法行为也越 ...

  6. struts2-环境搭建-访问流程-配置详解-常量配置-类详解

    1 struts2概述 1.1 概念  1.2 struts2使用优势 自动封装参数 参数校验 结果的处理(转发|重定向) 国际化 显示等待页面 表单的防止重复提交 struts2具有更加先进的架构以 ...

  7. Luogu P1073 最优贸易(最短路)

    P1073 最优贸易 题意 题目描述 \(C\)国有\(n\)个大城市和\(m\)条道路,每条道路连接这\(n\)个城市中的某两个城市.任意两个城市之间最多只有一条道路直接相连.这\(m\)条道路中有 ...

  8. Java数据结构和算法(七)--AVL树

    在上篇博客中,学习了二分搜索树:Java数据结构和算法(六)--二叉树,但是二分搜索树本身存在一个问题: 如果现在插入的数据为1,2,3,4,5,6,这样有序的数据,或者是逆序 这种情况下的二分搜索树 ...

  9. LUOGU P4149 [IOI2011]Race

    题目描述 给一棵树,每条边有权.求一条简单路径,权值和等于 KKK ,且边的数量最小. 输入输出格式 输入格式: 第一行:两个整数 n,kn,kn,k . 第二至 nnn 行:每行三个整数,表示一条无 ...

  10. poweroj1745: 餐巾计划问题

    传送门 最小费用最大流. 每天拆成两个点,i表示用完的餐巾,i+n表示干净的餐巾. s向i连容量为ri费用为0的边,表示每天用脏的ri条餐巾. i+n向t连容量为ri费用为0的边,表示每天需要用ri条 ...