谷歌浏览器禁止右滑返回历史_移动端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禁用浏览器左滑右滑的前进后退功能相关推荐

启动成功浏览器显示不了_移动端利用chrome浏览器在PC端进行调试方法
由于最近工作中遇到需要在电脑上调试手机端的功能和样式,之前也没有遇到过,所以就各种百度和试验.最后终于功夫不负有心人,成功了.(那一刻心情真滴很鸡冻啊~~~~~~~~~).所以暂时记录下来.以免鸡冻过 ...
chrome手机版打开调试模式_移动端利用chrome浏览器在PC端进行调试方法
由于最近工作中遇到需要在电脑上调试手机端的功能和样式,之前也没有遇到过,所以就各种百度和试验.最后终于功夫不负有心人,成功了.(那一刻心情真滴很鸡冻啊~~~~~~~~~).所以暂时记录下来.以免鸡冻过 ...
移动端web设计尺寸_移动端H5页面的设计稿尺寸（上）
由于HTML5和微信内置浏览器的火爆,移动端H5网页越发流行.在设计制作移动端网页的时候,你是否疑惑,这种网站设计稿应该做成的多少屏宽,是否应该跟手机的分辨率一致,还是应该按照iPhone的分辨率来设 ...
css实现div从左到右出现,css横向排列_css div 实现图片从左向右自动横向排列
摘要腾兴网为您分享:css div 实现图片从左向右自动横向排列,追书神器,中英翻译,优酷,武魂传说等软件知识,以及宝app,安卓串口,爱奇艺看图软件,爆枪英雄好号送,手机短信加密软件,阳光厨房,c ...
beautifulsoup find函数返回值_再端一碗BeautifulSoup
在上一章我们介绍了如何使用BeautifulSoup抓取安徒生童话故事<丑小鸭>,通过一个简单的例子,大家应该对于python如何进行爬取网页内容有了一个初步的认识.在这一章节,我们将延续 ...
ios12怎么滑屏解锁_对比苹果iOS12和安卓9.0，相互学习了哪些功能
上周,安卓最新版安卓9.0已经推送了正式版本,而iOS12也已经发布了Beta7,无限接近于正式版.如无意外,在九月份,无论是安卓还是iOS,都会完成今年的系统例行换代. 而出乎人们意料但又在情理之中 ...
微信小程序界面禁止下拉左右滑动_手机 QQ v8.0 正式版上线，新界面，新功能...
本文授权转自艾橙互动公众号. 经过一段时间内测,QQ手机版8.0 版本正式上线了. 目前iOS 版本已经更新,iOS 用户可以通过在App Store 进行更新体验,目前版本为v8.0.0.472. ...
input禁止后怎么实现复制功能_（变强、变秃）Java从零开始之JQuery购物车功能实操...
今天实现了购物车的一些功能,包括删除添加,复制,修改值,全选,反选等. 以下是代码跟配图: js代码部分:通过各种事件实现了按钮的具体功能 $(function(){//全选功能$("#ch ...
华为nova4e能更新鸿蒙吗,华为nova4e禁止系统更新的方法_怎么关闭和禁用系统更新功能...
下面也还是来说说部分机友在用这个华为nova4e手机的时候会提到的一个问题,那就是不想让手机进行更新,因为有的机友觉得现在的系统用着挺好的,不想操作系统的更新,想把手机的更新功能暂时关闭了,那这个怎么 ...

谷歌浏览器禁止右滑返回历史_移动端h5禁用浏览器左滑右滑的前进后退功能

谷歌浏览器禁止右滑返回历史_移动端h5禁用浏览器左滑右滑的前进后退功能相关推荐

最新文章

热门文章