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

来源:https://www.cnblogs.com/juice-war/archive/2019/12/23/12082798.html
-Advertisement-
Play Games

在項目運行過程中發現,用戶在有左右滑動前進後退的功能的瀏覽器上簽字時,偶然觸發了前進後退會導致canvas像是重置了一樣內容消失,所以需要在代碼中處理這種情況。 基本原理就是在touchmove事件中阻止預設事件,使瀏覽器不會觸發前進後退事件,但是也會無法觸發scroll事件讓頁面正常滾動,後續如何 ...


在項目運行過程中發現,用戶在有左右滑動前進後退的功能的瀏覽器上簽字時,偶然觸發了前進後退會導致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')

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

完結


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • jstree設置插件checkbox只允許單選 jstree version 3.3.8 單選配置參數: $.jstree.defaults.core.multiple 示例: ...
  •  HTML基本語法 認識網頁 網頁主要由文字、圖像和超鏈接等元素構成。當然,除了這些元素,網頁中還可以包含音頻、視頻以及Flash等。 常見瀏覽器內核介紹 瀏覽器是網頁運行的平臺,常用的瀏覽器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我們平時稱為五大瀏覽器。 ...
  • 內網穿透 相信很多人都會想把自己的電腦做成伺服器,然後掛上網站,讓別人可以訪問自己的網站。的這種想法,恰好,我前幾天學會了個可以把自己電腦做成伺服器,把網頁發佈到外網可以讓別人訪問的方法。 前幾天在弄支付寶掃碼支付,因為一直看不懂官方寫的引用文檔,百度的教程也看不懂,然後就去騰訊課堂看關於支付寶掃碼 ...
  • 1.vue構造器: var v=new Vue({ ......... }) <div id="d1"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div> <script type="text/ ...
  • 1、保存canvas中繪製的內容為圖片 HTML代碼: <canvas id="canvas" width="400" height="400"></canvas> <div> <button id="save">保存</button> </div> js代碼: var arr = [ {locat ...
  • 說起text-align,大家一定都不覺得陌生,我們常用關鍵字left、right、center實現行內元素相對父元素左、右、居中對齊,當然我們也使用justify來實現文本兩端對齊。 如上圖,兩端對齊相對於左對齊,視覺上顯得整齊有序。但justify對最後一行無效,通常這樣的排版對整段文字是極好的 ...
  • 分割線是網頁中比較常見的一類設計了,比如說知乎的更多回答 這裡的自適應是指兩邊的橫線會隨著文字的個數和父級的寬度自適應 偷偷的看了一下知乎的實現,很顯然是用一塊白色背景覆蓋的,加一點背景就露餡了 心想:知乎的前端也不怎麼樣? 可能別人的重點不在這些上面吧 下麵列舉幾種更好的實現方式,不會露餡的那種 ...
  • 案例:旋轉木馬 頁面載入時候出現的效果,script標簽寫在head裡面,body上面 顯示一個圖片散開的動畫,遍歷之後,把每個圖片用封裝的動畫函數移動到指定目標(同時改變多屬性:寬,透明度,層級,top, left) 在做左右按鈕點擊事件。 右邊按鈕,用數組裡面的push和shift,數組第一個去 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...