JGUI源碼：Accordion滑鼠中鍵滾動和手機端滑動實現

来源:https://www.cnblogs.com/zhaogaojian/archive/2019/02/23/10421950.html
-Advertisement-
Play Games

本文是抽屜組件在PC端滾動滑鼠中鍵、手機端滑動時，滾動數據列表實現方法，沒有使用iscroll等第三方插件，支持火狐，谷歌，IE等瀏覽器。演示在：www.jgui.com Github地址：https://github.com/zhaogaojian/JGUI覺得好的給個star，謝謝! 源碼未壓縮 ...


本文是抽屜組件在PC端滾動滑鼠中鍵、手機端滑動時，滾動數據列表實現方法，沒有使用iscroll等第三方插件，支持火狐，谷歌，IE等瀏覽器。

演示在：www.jgui.com   

Github地址：https://github.com/zhaogaojian/JGUI

效果

覺得好的給個star，謝謝!

源碼未壓縮，請右鍵查看網頁源碼，相關文件有accordion.js，accordion.css,index.html

隱藏滾動條可以通過設置margin隱藏滾動條方式實現，css3支持直接隱藏滾動條，這兩種方式實現簡單，網上也有很多文章

本文使用監聽滑鼠滾動事件滾動方式。

下麵是實現過程和思路，大家可以一起來學習下使用到的技術。

前端html結構如下

<div class="jgui-accordion"
            style="width:100%;overflow:hidden;position: absolute;top:60px;left:0px;right: 0px;bottom:0px;">
            <div class="jgui-accordion-list">
                <ul>
                    <dl>
                        <dt class="jgui-accordion-navitem">
                            <a>
                                <i class="anticon  icon-home"></i>
                                <span>目錄1</span>
                                <i class="jgui-accordion-navitem-more"></i>
                            </a>
                        </dt>
.......

 

方法一：使用jquery animate實現（只處理垂直方向上滾動）

//電腦端中鍵滾動事件
mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : "mousewheel";
$('.jgui-accordion').on(mousewheel, function (event) {
    var delta = 0;
    if (!event) /* For IE. */
        event = window.event;
    if (event.originalEvent.wheelDelta) { /* IE/Opera. */
        delta = event.originalEvent.wheelDelta / 120;
    } else if (event.originalEvent.detail) {
        delta = -event.originalEvent.detail / 3;
    }
    console.log(delta);
    if (delta)
        handle(delta);
    if (event.preventDefault)
        event.preventDefault();
    event.returnValue = false;
});
var handle = function (delta) {
    var step = Math.floor($('.jgui-accordion').height()/10);            //可視區高度
    var cur_top = $('.jgui-accordion').scrollTop();    //當前滾過的高度
    var direction = delta > 0 ? -1 : 1;
    $(".jgui-accordion").stop().animate({ scrollTop: direction * step + cur_top }, 50);
}
//手機端滑鼠滑動事件
$(".jgui-accordion").on("touchstart", function (e) {
    startY = e.originalEvent.changedTouches[0].pageY;
});

$(".jgui-accordion").on("touchmove", function (e) {

    e.preventDefault();
    moveEndY = e.originalEvent.changedTouches[0].pageY,
    Y = (moveEndY - startY);
    startY = moveEndY;
    var cur_top = $('.jgui-accordion').scrollTop();    //當前滾過的高度
    $(".jgui-accordion").stop().animate({ scrollTop: -Y + cur_top }, 0);

});

方法二：使用css3 tansform實現,以手機端滑動為例

//手機端滑鼠滑動事件
$(".jgui-accordion-list").on("touchstart", function (e) {
    startY = e.originalEvent.changedTouches[0].pageY;
    console.log("aa");
});
curY=0;
$(".jgui-accordion-list").on("touchmove", function (e) {
　　e.preventDefault();
    moveEndY = e.originalEvent.changedTouches[0].pageY,
    Y = (moveEndY - startY) ;
    curY+=Y;
    startY = moveEndY;
    $(".jgui-accordion-list").css('-webkit-transform','translate3d(0px,'+curY+'px,0px)')
    $(".jgui-accordion-list").css('-moz-transform','translate3d(0px,'+curY+'px,0px)')
});

在本頁面中，兩種方式性能基本上差不多，第二種需要手動計算滾動區域，防止過高或過低。

PC端模擬手機滑動效果如下

滾動時，會發現缺少了一點慣性，比如滑鼠中鍵一次撥動幾個和撥動一個應該移動距離不一樣，為瞭解決這個問題改進代碼如下

//電腦端中鍵滾動事件
var sumdelta=0;
var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : "mousewheel";
$('.jgui-accordion').on(mousewheel, function (event) {
    var delta = 0;
    if (!event) /* For IE. */
        event = window.event;
    if (event.originalEvent.wheelDelta) { /* IE/Opera. */
        delta = event.originalEvent.wheelDelta / 120;
    } else if (event.originalEvent.detail) {
        delta = -event.originalEvent.detail / 3;
    }
    if (delta)
    {
        sumdelta+=(delta> 0 ? -1 : 1);
        setTimeout("handle()",80);
    } 
    stopPropagation(event);
});
var handle = function () {
    isanimate=true;
    var step = Math.floor($('.jgui-accordion').height()/5);//可視區高度
    var cur_top = $('.jgui-accordion').scrollTop();    //當前滾過的高度
    var direction = sumdelta ;//> 0 ? -1 : 1;
    $(".jgui-accordion").stop().animate({ scrollTop: direction * step + cur_top }, 800,'swing',function(){sumdelta=0;});
    
}

上面通過setTimeout延時觸發滾動事件，即可實現不同的滾動速度。

測試發現突然變向滑動時，會感覺有延遲，分析代碼原因主要是因為sumdelta=0,這時候可能正在進行的滾動操作被重置了，另外部分變數使用的全局變數也不合適，因為界面上可能有多個accordion，

下麵增加一個Jquery對象變數，優化代碼如下:

//電腦端中鍵滾動事件
var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : "mousewheel";
$('.jgui-accordion').on(mousewheel, function (event) {
    var delta = 0;
    if (!event) /* For IE. */
        event = window.event;
    if (event.originalEvent.wheelDelta) { /* IE/Opera. */
        delta = event.originalEvent.wheelDelta / 120;
    } else if (event.originalEvent.detail) {
        delta = -event.originalEvent.detail / 3;
    }
    if (delta)
    {
        var datas=$(this).data('datas');
        datas.sumdelta+=(delta> 0 ? -1 : 1);
        var direction = datas.sumdelta ;
        var obj=$(this);
        var handle = function () {
            datas.sumdelta=0;
            var step = Math.floor(obj.height()/10);//可視區高度
            var cur_top = obj.scrollTop();    //當前滾過的高度
            obj.stop().animate({ scrollTop: direction * step + cur_top }, 400,'linear',function(){direction=0;});
            
        }
        setTimeout(handle,100);
    } 
    stopPropagation(event);
});

datas.sumdelta是自定義的一個Jquery對象變數，增加變數方法如下（return this.each是一個鏈式操作，返回的是this）。

$.fn.jAccordion = function (p_options,p_datas, p_param) {
    return this.each(function () {
        var obj = $(this);
        var datas = $.extend({
            sumdelta:0
        },  p_datas);
        obj.data('datas', datas);
    });
};
$(".jgui-accordion").jAccordion();

為了進一步提升滾輪加速效果和防止Timer重入再次修改代碼如下

//電腦端中鍵滾動事件
var mousewheel = getBrowserInfo() == "Firefox" ? "DOMMouseScroll" : "mousewheel";
$('.jgui-accordion').on(mousewheel, function (event) {
    var delta = 0;
    if (!event) /* For IE. */
        event = window.event;
    if (event.originalEvent.wheelDelta) { /* IE/Opera. */
        delta = event.originalEvent.wheelDelta / 120;
    } else if (event.originalEvent.detail) {
        delta = -event.originalEvent.detail / 3;
    }
    if (delta)
    {
        var datas=$(this).data('datas');
        datas.sumdelta+=(delta> 0 ? -1 : 1);
        var direction = datas.sumdelta ;
        var obj=$(this);
        var handle = function () {
            datas.isscrolling=true;
            datas.sumdelta=0;
            var step = Math.floor(obj.height()/30);//可視區高度
            var cur_top = obj.scrollTop();    //當前滾過的高度
            obj.stop().animate({ scrollTop: direction*Math.abs(direction) * step + cur_top }, 400,'linear',function(){direction=0;datas.isscrolling=false});
            
        }
        if(!datas.isscrolling)
        setTimeout(handle,100);
    } 
    stopPropagation(event);
});
$.fn.jAccordion = function (p_options,p_datas, p_param) {
    return this.each(function () {
        var obj = $(this);
        var datas = $.extend({
            sumdelta:0,isscrolling:false
        },  p_datas);
        obj.data('datas', datas);
    });
};
$(".jgui-accordion").jAccordion();

這樣在撥動一兩格時，滾動條緩慢移動，當快速波動時，因為平方的效應，能引起加速滾動，可以快速的回到頂部或者底部。如果不想使用這個滾動條代碼，將mousewheel事件註釋掉即可。

現在滑鼠上下滾動很平滑了，也可以快慢滾動了，同理，手機端touch事件也可以根據這個原理改造，需要考慮滑動時間和滑動距離，根據這個來計算滑動偏移距離,手機端效果將後續實現。大家如果有空深入完善下，應該也是可以媲美IScroll的。後續將擴展一些JS防範方便大家使用。

 


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

-Advertisement-
Play Games
更多相關文章
  • 記一次vue長列表的記憶體性能分析和優化
    好久沒寫東西，博客又長草了，這段時間身心放鬆了好久，都沒什麼主題可以寫了 上周接到一個需求，優化vue的一個長列表頁面，忙活了很久也到尾聲了，記憶體使用和卡頓都做了一點點優化，還算有點收穫 寫的有點啰嗦，可以看一下我是怎麼進行這個優化的，也許有點幫助呢 這個長列表頁面，其實是一個實時日誌上報的頁面，隨 ...
  • VSCode中快捷輸入HTML代碼
    VSCode中有一些快捷編輯HTML的方法，能大大提高工作效率，在這記錄一些。 1.輸入html:5，然後按tab鍵或enter鍵，效果如下： 2.輸入link:css引入css樣式文件，輸入script:src引入js 3.輸入標簽名自動補齊 4.隨機文本的輸入 5.使用"#"輸入id，"."輸入 ...
  • 冒泡排序進階優化
    冒泡排序的思想：我們以升序排列為例，所謂冒泡排序就是在無序數組中每執行一趟選出這一趟中最大的數放在最後面，第二趟選出次大的數放在倒數第二位上，直到完成排序。以此類推降序就是將小的數放在後面排序。代碼如下： 方法（一） 運行圖： 方法（二） 主要還是對方法一的優化，設置一個標誌，如果這一趟下來發生了交 ...
  • 現代JavaScript函數庫 usuallyjs 的安裝和使用
    usuallyjs 是一個面向現代 Web 開發的 JavaScript 實用函數庫。 usuallyjs 基於 ES6 開發，拋棄了傳統 Web 開發中 DOM 和 BOM 操作部分的內容，精選了一系列 Web 開發過程中最常用的、最實用的 JavaScript 函數。與 Vue、React、A... ...
  • JavaScript函數繼承
    在ES6中有了繼承，使用extends關鍵字就能實現。但這裡講的講的不是這種，而是ES6之前的幾種實現繼承的方式。 （一）原型繼承 ECMAScript中將原型鏈作為實現繼承的主要方法。其基本思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。 例如： （二）借用構造函數 在解決原型中包含引 ...
  • 取消Fetch API請求
    如今，Fetch API已經成為現在瀏覽器非同步網路請求的標準方法，但Fetch也是有弊端的，比如： Fetch還沒有方法終止一個請求，而且Fetch無法檢測上傳進度 現在我們可以通過 AbortController 和 AbortSignal 來終止，代碼如下： const controller = ...
  • 原生 JS 的 Base64 轉碼
    JavaScript 原生提供兩個 Base64 相關的方法： btoa()：任意值轉為 Base64 編碼 atob()：Base64 編碼轉為原來的值 encodeURIComponent() 該方法會轉碼除了語義字元之外的所有字元，即元字元也會被轉碼。 decodeURIComponent() ...
  • WebAssembly學習(二)：Windows10下WebAssembly C/C++編譯環境的搭建與Hello World嘗試
    首先，不論是在Windows、Linux還是Mac上，Webassembly的編譯都是主要依賴於Emscripten SDK這個工具的。但是，在這裡必須要吐槽一下，不論是WebAssembly官網、WebAssembly中文網還是Emscriptem官網安裝文檔上給出的安裝方式基本都是這樣的（中文網 ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類