移动端h5禁用浏览器左滑右滑的前进后退功能
在项目运行过程中发现,用户在有左右滑动前进后退的功能的浏览器上签字时,偶然触发了前进后退会导致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禁用浏览器左滑右滑的前进后退功能的更多相关文章
- Android SwipeToDismiss:左滑/右滑删除ListView条目Item
<Android SwipeToDismiss:左右滑动删除ListView条目Item> Android的SwipeToDismiss是github上一个第三方开源框架(githu ...
- ViewPager 滑动一半的判断方法以及左滑右滑判断
做项目的时候,会碰到用viewpager + fragments去实现多页滑动.有些时候需要完成:界面在滑动到一半或是一半以上的时候,需要把title之类的切换到下一个页面.这个时候仅仅依赖Viewp ...
- 让浏览器支持 jquery ajax load 前进、后退 功能
BEGIN; 一般在做 ajax load 的时候,非常多人都不会考虑到须要浏览器支持前进后退功能,由于大部分人都不知道能够实现. 近期遇到这个问题,经过一小段研究,发现github已经有现成的开源工 ...
- 移动端以及 PC浏览器页面分享到朋友圈等的功能实现
我们经常可以在一些 app上看到分享到朋友圈.微信好友.qq好友等功能,例如 饿了么.美团等 app,下单之后就会弹出给好友发红包的 modal窗,这在 app上很常见,app的权限可以很大,甚至连启 ...
- Taro UI开发小程序实现左滑喜欢右滑不喜欢效果
前言:年后入职了一家新公司,与前同事交接完之后,发现公司有一个四端的项目(iOS,Android,H5,小程序),iOS和安卓都实现了左滑右滑的效果,而h5和小程序端没实现,询问得知前同事因网上没找到 ...
- App开发流程之右滑返回手势功能
iOS7以后,导航控制器,自带了从屏幕左边缘右滑返回的手势功能. 但是,如果自定义了导航栏返回按钮,这项功能就失效了,需要自行实现.又如果需要修改手势触发范围,还是需要自行实现. 广泛应用的一种实现方 ...
- 移动端H5测试调试利器 chrome://inspect/#devices
使用 chrome://inspect/#devices,可以使安卓手机里的WebView也能和chrome一样审查元素,调试和测试移动端H5页面. 我使用的是三星S6 (该功能支持安卓系统4.4及以 ...
- jquery左划出现删除按钮,右滑隐藏
jquery左侧划出显示删除按钮,右滑动隐藏删除按钮 <!doctype html> <html> <head> <meta charset="ut ...
- Android滑动列表(拖拽,左滑删除,右滑完成)功能实现(1)
场景: 近期做的TODO APP需要在主页添加一个功能,就是可以左滑删除,右滑完成.看了一下当前其他人做的例如仿探探式的效果,核心功能基本一样,但是和我预想的还是有少量区别,于是干脆自己重头学一遍如何 ...
随机推荐
- JS和JQuery概括
1. BOM 1. location相关 1. location.href 2. location.href="http://www.sogo.com" 3. location.r ...
- python 之 heapq (堆)
堆的实现通过构造二叉堆,实为二叉树的一种:这种数据结构具有以下性质: 任意节点小于(或大于)它的后裔,最小元(或最大元)在堆的根上 堆总是一颗完整树.即除了最低层,其它层的节点都被元素填满,且最低层极 ...
- 在Linux中使用selenium(环境部署)
1.安装chrome 用下面的命令安装Google Chrome yum install https://dl.google.com/linux/direct/google-chrome-stable ...
- 1、Redis的使用
非关系型数据库分类: 分类 典型代表 典型应用场景 数据类型 优点 缺点 键值 (key-value) Tokyo Cabinet/Tyrant, Redis, Voldemort, Oracle B ...
- #iOS问题记录# 频繁触发viewDidLayoutSubviews的问题
问题描述: 最近使用给Flutter团队写view组件的时候,出现了触发Widget的频繁build的问题. 问题排查: Flutter的同事提到在flutter层,是因为 updateViewpor ...
- 如何在Mac上切换python2和python3以及下载安装包 & 在Mac上如何查找系统自带python2.7的路径
电脑:系统是Mac OS 系统自带python2.7 自己下载安装了python3.6 问题:一开始我想在终端下执行python2的相关代码 例如 python kNN.py (kNN.py这 ...
- Leetcode145. Binary Tree Postorder Traversal二叉树的后序遍历
给定一个二叉树,返回它的 后序 遍历. 进阶: 递归算法很简单,你可以通过迭代算法完成吗? 递归: class Solution { public: vector<int> res; ve ...
- [转]WPF中的动画
WPF中的动画 周银辉 动画无疑是WP ...
- NOI2018 Day1 归程(return)
第一次参加NOI,当然,我没去现场做,只是在网络同步赛做了而已. 那网站,特别特别卡啊-- 最后只交了第一题,原本认为能AC,但是因为某些原因只有50分. 我这可怜的第一次啊-- 题目 题目点此处下载 ...
- thinkphp浏览历史功能实现方法
这篇文章主要介绍了thinkphp浏览历史功能实现方法,可实现浏览器的浏览历史功能,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了thinkphp浏览历史功能实现方法,分享给大家供大家参考.具 ...