解決手機瀏覽器頂部下拉出現網頁源或刷新的問題

来源:http://www.cnblogs.com/mapingchuan/archive/2017/11/29/7922842.html
-Advertisement-
Play Games

問題如下圖所示: 一般處理此類問題都會有一個屬性:”event.preventDefault()”,但是如果直接使用會導致頁面的內部滾動也失效導致不能滾動,我所處理的方式也與其類似。 因為滑動區域是向走的,所以滑動塊的頂部到瀏覽器頂部的距離最大為0(其餘為負值[$('#bodycthead').of ...


問題如下圖所示:

  一般處理此類問題都會有一個屬性:”event.preventDefault()”,但是如果直接使用會導致頁面的內部滾動也失效導致不能滾動,我所處理的方式也與其類似。
  因為滑動區域是向走的,所以滑動塊的頂部到瀏覽器頂部的距離最大為0(其餘為負值[$('#bodycthead').offset().top]),當為0的時候說明已經回到了頂部,繼續向下拉動的時候就不應該有反應,可以禁止預設滑動,而向上拉動的時候應該取消預設的滑動,所以應該將”event.preventDefault()”封裝成一個函數。
  需要做的就是判斷是向上滑動還是向下滑動,當接觸屏幕的時候記錄一個Y值(scroll_start = e.changedTouches[0].clientY;),移動的時候會產生一個Y值(e.changedTouches[0].clientY),兩個值得差值(e.changedTouches[0].clientY-scroll_start)如果是正值說明是向下滑動,如果是負值則是向上滑動。
添加事件監聽:

var scroll_start=0;//定義滑動時的起點
function handler(){//禁止預設滑動函數
    event.preventDefault();
}
document.addEventListener("touchstart",function(e){
    scroll_start = e.changedTouches[0].clientY;//設置起點為觸摸時的點
    if($('#bodycthead').offset().top==0){//如果觸摸時是滑動塊在頂部則禁用預設滑動
        document.addEventListener('touchmove', handler, false);
    }
});
document.addEventListener("touchmove",function(e){
    $("title").html(e.changedTouches[0].clientY-scroll_start);
    if($('#bodycthead').offset().top==0){//想做的是中斷滑動並禁用預設滑動,暫時沒找到中斷的方法
        document.addEventListener('touchmove', handler, false);
    }
    if((e.changedTouches[0].clientY-scroll_start)<0){//如果是向上滑動則恢復預設滑動
        document.removeEventListener('touchmove', handler, false);
    }
});        

暫時沒做到中斷滑動並禁止預設滑動效果,歡迎大家指導!


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

-Advertisement-
Play Games
更多相關文章
  • 在.net 的世界里,離不開委托和事件,其實理解透了後很簡單,總結了一下分為6步: 1)定義委托 public delegate void RevicedEventHandler(object sender,RevicedEventArgs e); RevicedEventArgs :自定義參數源, ...
  • 非同步socket不是一個新的概念,但是,對於普通開發人員來說很難掌握。 網上也有許多這方面的文章。大都比較零散。 因工作的需要,我編寫了此封裝庫。 本人認為較好的完成對非同步socket的封裝! 即不失性能,又非常易於使用。 此庫將socket處理分為幾個模塊,清晰明瞭。 有些模塊處理可能沒達到最佳狀... ...
  • 1.介面返回的流: 2.下載流文件的代碼 方法一:是用了插件 https://github.com/kennethjiang/js-file-download 方法二:是用了 blob 不管哪種方法,記得設置 responseType ...
  • <div> <ul class="nav nav-tabs"> <li class="active"><a href="#Index" aria-controls="Index" role="tab" data-toggle="tab">首頁</a></li> <li ><a href="#Inde ...
  • express的安裝 express創建新項目 創建完畢後,修改express的預設視圖引擎。 在views下刪掉對應的jade文件 加入index.html 在index.html中輸入 ...
  • 1、導入資源 2、JSP代碼 3、Js代碼 註意: 4、controller代碼 5、工具類 ...
  • 前言 除了瀏覽器提供的原生事件外,有時我們還需要自定義事件以滿足特定的需求,比如小模塊之間的通信,傳遞信息等。JavaScript提供了幾種自定義事件的方式: 1. Event() 構造函數, 創建一個新的事件對象 Event 2. CustomEvent() 創建一個自定義事件 3. docume ...
  • HTML頁面跳轉: window.open(url, "", "width=600,height=400"); 第二個參數:_self,在當前視窗打開視窗;_blank(預設值),在另外的新建視窗打開新視窗; window.location.href="http://www.jb51.net"; / ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...