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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類