移动端h5禁用浏览器左滑右滑的前进后退功能
2024-10-16 16:37:47
在项目运行过程中发现,用户在有左右滑动前进后退的功能的浏览器上签字时,偶然触发了前进后退会导致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')
这是文档中核心滚动的介绍,非常轻量,非常适合我们只是简单的想要解决浏览器左右滑动前进后退这一问题,具体用法可以参考文档。
完结
最新文章
- [Machine Learning &; Algorithm]CAML机器学习系列1:深入浅出ML之Regression家族
- socket阻塞与非阻塞,同步与异步
- SqlServer 事务和异常处理示例
- istringstream、ostringstream、stringstream 类介绍 .
- 【转】关于onActivityResult方法不执行的问题汇总
- GPS数据处理 - 字符串函数的灵活应用
- 关于angularjs的$state.go()与ui-sref传参问题
- 运维之Linux基础知识(三)
- 数据绑定技术一:GridView控件
- java课程设计——猜数游戏个人博客
- 【一天一道LeetCode】#81. Search in Rotated Sorted Array II
- 元组拆包 与 python拆包
- java中获取request与response对象的方法
- 工控安全入门之Modbus(转载)
- 【Dalston】【第七章】分布式链路跟踪(Sleuth)
- CVE-2018-7566
- php的精确计算
- TopJUI Combobox onSelect 事件失效BUG
- BZOJ 2535:NOI 2010 航空管制
- Thrift之java实例