下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

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

作者:白队     来源: https://www.cnblogs.com/juice-war/p/12082798.html点击数:3459发布时间: 2020-03-23 20:38:04

标签: webh5移动端

Web开发

  html标准自1999年12月发布的HTML4.01后,后继的HTML5和其它标准被束之高阁,为了推动web标准化运动的发展,一些公司联合起来,成立了一个叫做WebHypertextApplicationTechnologyWorkingGroup(Web超文本应用技术工作组-WHATWG)的组织。

  WHATWG致力于Web表单和应用程序,而W3C(WorldWideWebConsortium,万维网联盟)专注于XHTML2.0。在2006年,双方决定进行合作,来创建一个新版本的HTML。

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

  在BetterScroll2.0的设计当中,我们抽象了核心滚动部分,它作为BetterScroll的最小使用单元,压缩体积比1.0小了将近三分之一,往往你可能只需要完成一个纯粹的滚动需求,那么你只需要引入这一个库,方式如下:

  npminstall@better-scroll/core@next--save

  importBScrollfrom'@better-scroll/core'

  constbs=newBScroll('.div')

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

  完结

  H5即HTML5。万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改(这是一项推荐标准、外语原文:W3CRecommendation、见本处参考资料原文内容)。

赞(15)
踩(2)
分享到:
华为认证网络工程师 HCIE直播课视频教程