在全屏滾動頁面下實現鼠標滾輪的子級交互

godiscoder 發布于2019-08-19 17:18 / 3033人閱讀

摘要：由此，我們可以完全屏蔽的默認滾動觸發，改用方法控制全屏滾動，解除了全屏滾動與鼠標滾輪事件的強耦合。此外，通過定時器延時秒設置的值，將用戶的鼠標滾輪操作強制分為兩步，最終實現了目的。

需求分析

剛進公司產品提出一個需求：在全屏頁面中滾動鼠標滾輪更新文本，回滾再恢復原文本，同時不影響全屏頁面的正常切換：

初始狀態

向下滾動鼠標后出現新文本

看似一個非常簡單的需求，但因為這是一個使用了fullPage.js的全屏滾動頁面，默認情況下滾動鼠標滾輪整個全屏頁面也會隨之滾動，因此解決起來還是費了一番功夫。

解決思路 引入jQuery 鼠標滾輪插件 mousewheel

因為Firefox在鼠標滾輪滾動事件上使用的API是DOMMouseScroll而非其他主流瀏覽器使用的onmousewheel，因此首先引入一個jQuery插件mousewheel以添加跨瀏覽器鼠標滾動事件的支持。

原始思路

一開始想到的方法是：當頁面滾動到某一個頁面時，先屏蔽fullPage.js的默認滾動觸發，即把setAllowScrolling設置為false；每次手指滾動鼠標滾輪，結合文本顯示的具體狀態和鼠標滾輪滾動的方向再更改setAllowScrolling的值恢復整個頁面的滾動。例如，當頁面滾動到如上圖1所示的頁面時，文本是默認文本，此時應實現向上滾動切換到上一頁，向下滾動切換文字；當處于上圖2所示的頁面時，應實現向上滾動切回原文字，向下滾動切換到下一頁。可以通過自定義變量isDefaultPara紀錄每次滾動鼠標后，文本處于何種狀態。這種思路邏輯上是行的通的，但是存在兩個問題：一是沒有一個API可以反映用戶“滾動了一次滾輪”，通過mousewheel插件我們可以獲取的數據僅僅只有滾動的方向及滾動角度大小；二是setAllowScrolling不能選擇性地屏蔽某一方向的滾動而只能全面禁止頁面滾動，因此無論如何都無法實現上述例子所要達到的效果。

改進思路

查閱fullPage.js的官方文檔之后，發現該插件提供了一個moveTo(section, slide)的方法函數，通過這個方法可以手動將屏幕滾動到某個section或者slide。由此，我們可以完全屏蔽fullPage.js的默認滾動觸發，改用moveTo方法控制全屏滾動，解除了全屏滾動與鼠標滾輪事件的強耦合。此外，通過定時器延時1秒設置isDefaultPara的值，將用戶的鼠標滾輪操作強制分為兩步，最終實現了目的。

具體代碼

        //在fullpage()方法中添加以下兩個回調函數
        afterRender: function(){
            //頁面載入后，禁止默認的鼠標滾輪滾動行為
            $.fn.fullpage.setAllowScrolling(false);
        },
        afterLoad: function(anchorLink, index){
            //此處只寫出滾動到第3屏的代碼，其他屏同理
            if (index == 3) {
                //判定默認文檔顯示狀態并存入isDefaultPara變量
                var isDefaultPara = $(".default-para").is(":visible");
                $(".section").eq(2).mousewheel(function(event, delta, deltaX, deltaY){
                    switch (true) {
                        case delta<0 && isDefaultPara:
                            $(".default-para").hide().removeClass("bounceInRight");
                            $(".post-para").show().addClass("bounceInLeft");
                            //當文本出現的動畫顯示完全(1s后)才能進行下一步操作
                            setTimeout(function(){
                                defaultPara = false;
                            },1000);
                            break;
                        case delta>0 && isDefaultPara:
                            $.fn.fullpage.moveTo(2);
                            break;
                        case delta<0 && !isDefaultPara:
                            $.fn.fullpage.moveTo(4);
                            break;
                        case delta>0 && !isDefaultPara:
                            $(".post-para").hide().removeClass("bounceInLeft");
                            $(".default-para").show().addClass("bounceInRight");
                            setTimeout(function(){
                                firstPara = true;
                            },1000);
                        default:
                            return false;
          }

云服務器 GPU云服務器 html鼠標滾動頁面鼠標滾輪鼠標滾輪事件原生js滾輪滾動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78396.html

用 ES6 寫全屏滾動插件

摘要：這篇文章將介紹如何使用原生主要使用語法實現全屏滾動插件，兼容手機觸屏，觸摸板優化，支持自定義頁面動畫，壓縮后文件只有。這篇文章將介紹如何使用原生 JS （主要使用 ES6 語法）實現全屏滾動插件，兼容 IE 10+、手機觸屏，Mac 觸摸板優化，支持自定義頁面動畫，壓縮后 gzip 文件只有 2.15KB。完整源碼在這 pure-full-page，點這查看 demo。 1）前面的話...

liuchengxu 2019-08-26 11:52 評論0 收藏0
JavaScript 筆記 —— 鼠標事件的瀏覽器差異

摘要：本文總結一下，鼠標事件在不同瀏覽器實現的差異。和相關元素差異和是級事件當中的其中兩個事件。標準事件對象使用屬性來識別鼠標按鍵。該事件當中的值與事件對象當中的作用相同。鼠標是我們在 PC 端瀏覽網頁時候最重要的交互工具，因此鼠標事件也是 Web 開發當中最常用的一類事件。然而，由于各種原因，不同廠商或者不同版本的瀏覽器之間對于鼠標事件的實現也有所不同。本文總結一下，鼠標事件在不同瀏覽器...

haoguo 2019-08-21 10:25 評論0 收藏0
AlloyTouch全屏滾動插件發布--30秒搞定順滑H5頁

原文鏈接：https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先驗貨 showImg(https://segmentfault.com/img/remote/1460000007885626?w=280&h=280); 插件代碼可以在這里找到。注意，雖然是掃碼體驗，但是AlloyTouch.FullPag...

_ivan 2019-08-21 11:21 評論0 收藏0
事件代理及常用的 HTML 事件

摘要：之前總結了事件捕獲和冒泡以及阻止事件傳播，今天寫一下事件代理方面的總結事件之捕獲冒泡阻止事件傳播事件代理監聽列表中多項時，實現點擊控制臺打印對應文本，如下蘋果香蕉葡萄首先想到的對每一個進行監聽或者使用和的區別是屬性，是方法。之前總結了事件捕獲和冒泡以及阻止事件傳播，今天寫一下事件代理方面的總結DOM 事件之捕獲、冒泡：阻止事件傳播：事件代理監聽列表中多項 li 時，實現點擊 li...

xavier 2019-08-23 10:57 評論0 收藏0