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

来源: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
  • 前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器,其界面簡潔大方,操作體驗流暢。該播放器支持多種音頻格式(如 MP4、WMA、OGG、FLAC 等),並具備標記、實時歌詞顯示等功能。 另外,還支持換膚及多語言(中英文)切換。核心音頻處理採用 FFmpeg 組件,獲得了廣泛認可,目前 Git ...
  • OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統,完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面,查看已創建應用的Client ID和Clien ...
  • 解決了這個問題:《winForm下,fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自:https://www.fcnsoft.com/Home/Sho ...
  • 國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面,接收裸 Win 32 的 WM_Pointer 消息,從消息裡面獲取觸摸點信息,使用觸摸點 ...
  • 前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能,還集成了高性能的輕量級 POS 解決方案,確保頁面載入速度極快,提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI: ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的,因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 問題 問題是這樣的:第三方的webapi,需要先調用登陸介面獲取Cookie,訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面,返回的Headers中沒有找到Cookie信息。 分析 首先,使用Postman測試該登陸介面,正常返回Cookie信息,說明是HttpCli ...
  • 國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低,主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上,.NET曾因微軟的閉源策略發展受限,儘管後來推出了跨平臺的.NET ...
  • 在WPF開發應用中,動畫不僅可以引起用戶的註意與興趣,而且還使軟體更加便於使用。前面幾篇文章講解了畫筆(Brush),形狀(Shape),幾何圖形(Geometry),變換(Transform)等相關內容,今天繼續講解動畫相關內容和知識點,僅供學習分享使用,如有不足之處,還請指正。 ...
  • 什麼是委托? 委托可以說是把一個方法代入另一個方法執行,相當於指向函數的指針;事件就相當於保存委托的數組; 1.實例化委托的方式: 方式1:通過new創建實例: public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...