移動端h5禁用瀏覽器左滑右滑的前進後退功能

在項目運行過程當中發現,用戶在有左右滑動前進後退的功能的瀏覽器上簽字時,偶然觸發了前進後退會致使canvas像是重置了同樣內容消失,因此須要在代碼中處理這種狀況。javascript

基本原理就是在touchmove事件中阻止默認事件,使瀏覽器不會觸發前進後退事件,可是也會沒法觸發scroll事件讓頁面正常滾動,後續如何讓頁面能正常滾動就會有多種思路。html

參考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.htmljava

在 BetterScroll 2.0 的設計當中,咱們抽象了核心滾動部分,它做爲 BetterScroll 的最小使用單元,壓縮體積比 1.0 小了將近三分之一,每每你可能只須要完成一個純粹的滾動需求,那麼你只須要引入這一個庫,方式以下:git

npm install @better-scroll/core@next --save
import BScroll from '@better-scroll/core'
const bs = new BScroll('.div')

這是文檔中核心滾動的介紹,很是輕量,很是適合咱們只是簡單的想要解決瀏覽器左右滑動前進後退這一問題,具體用法能夠參考文檔。github

完結npm

相關文章
相關標籤/搜索