移動端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')

這是文檔中核心滾動的介紹,非常輕量,非常適合我們只是簡單的想要解決瀏覽器左右滑動前進后退這一問題,具體用法可以參考文檔。

完結


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM