資訊專欄INFORMATION COLUMN
摘要：由此，我們可以完全屏蔽的默認滾動觸發(fā)，改用方法控制全屏滾動，解除了全屏滾動與鼠標滾輪事件的強耦合。此外，通過定時器延時秒設(shè)置的值，將用戶的鼠標滾輪操作強制分為兩步，最終實現(xiàn)了目的。
需求分析
剛進公司產(chǎn)品提出一個需求：在全屏頁面中滾動鼠標滾輪更新文本，回滾再恢復(fù)原文本，同時不影響全屏頁面的正常切換：
初始狀態(tài)
向下滾動鼠標后出現(xiàn)新文本
看似一個非常簡單的需求，但因為這是一個使用了fullPage.js的全屏滾動頁面，默認情況下滾動鼠標滾輪整個全屏頁面也會隨之滾動，因此解決起來還是費了一番功夫。
解決思路 引入jQuery 鼠標滾輪插件 mousewheel因為Firefox在鼠標滾輪滾動事件上使用的API是DOMMouseScroll而非其他主流瀏覽器使用的onmousewheel，因此首先引入一個jQuery插件mousewheel以添加跨瀏覽器鼠標滾動事件的支持。
原始思路一開始想到的方法是：當頁面滾動到某一個頁面時，先屏蔽fullPage.js的默認滾動觸發(fā)，即把setAllowScrolling設(shè)置為false；每次手指滾動鼠標滾輪，結(jié)合文本顯示的具體狀態(tài)和鼠標滾輪滾動的方向再更改setAllowScrolling的值恢復(fù)整個頁面的滾動。例如，當頁面滾動到如上圖1所示的頁面時，文本是默認文本，此時應(yīng)實現(xiàn)向上滾動切換到上一頁，向下滾動切換文字；當處于上圖2所示的頁面時，應(yīng)實現(xiàn)向上滾動切回原文字，向下滾動切換到下一頁?？梢酝ㄟ^自定義變量isDefaultPara紀錄每次滾動鼠標后，文本處于何種狀態(tài)。這種思路邏輯上是行的通的，但是存在兩個問題：一是沒有一個API可以反映用戶“滾動了一次滾輪”，通過mousewheel插件我們可以獲取的數(shù)據(jù)僅僅只有滾動的方向及滾動角度大??；二是setAllowScrolling不能選擇性地屏蔽某一方向的滾動而只能全面禁止頁面滾動，因此無論如何都無法實現(xiàn)上述例子所要達到的效果。
改進思路查閱fullPage.js的官方文檔之后，發(fā)現(xiàn)該插件提供了一個moveTo(section, slide)的方法函數(shù)，通過這個方法可以手動將屏幕滾動到某個section或者slide。由此，我們可以完全屏蔽fullPage.js的默認滾動觸發(fā)，改用moveTo方法控制全屏滾動，解除了全屏滾動與鼠標滾輪事件的強耦合。此外，通過定時器延時1秒設(shè)置isDefaultPara的值，將用戶的鼠標滾輪操作強制分為兩步，最終實現(xiàn)了目的。
具體代碼 //在fullpage()方法中添加以下兩個回調(diào)函數(shù)
afterRender: function(){
//頁面載入后，禁止默認的鼠標滾輪滾動行為
$.fn.fullpage.setAllowScrolling(false);
},
afterLoad: function(anchorLink, index){
//此處只寫出滾動到第3屏的代碼，其他屏同理
if (index == 3) {
//判定默認文檔顯示狀態(tài)并存入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");
//當文本出現(xiàn)的動畫顯示完全(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;
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/78396.html
摘要：這篇文章將介紹如何使用原生主要使用語法實現(xiàn)全屏滾動插件，兼容手機觸屏，觸摸板優(yōu)化，支持自定義頁面動畫，壓縮后文件只有。 這篇文章將介紹如何使用原生 JS （主要使用 ES6 語法）實現(xiàn)全屏滾動插件，兼容 IE 10+、手機觸屏，Mac 觸摸板優(yōu)化，支持自定義頁面動畫，壓縮后 gzip 文件只有 2.15KB。完整源碼在這 pure-full-page，點這查看 demo。 1）前面的話...
摘要：本文總結(jié)一下，鼠標事件在不同瀏覽器實現(xiàn)的差異。和相關(guān)元素差異和是級事件當中的其中兩個事件。標準事件對象使用屬性來識別鼠標按鍵。該事件當中的值與事件對象當中的作用相同。 鼠標是我們在 PC 端瀏覽網(wǎng)頁時候最重要的交互工具，因此鼠標事件也是 Web 開發(fā)當中最常用的一類事件。然而，由于各種原因，不同廠商或者不同版本的瀏覽器之間對于鼠標事件的實現(xiàn)也有所不同。本文總結(jié)一下，鼠標事件在不同瀏覽器...
原文鏈接：https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先驗貨 showImg(https://segmentfault.com/img/remote/1460000007885626?w=280&h=280); 插件代碼可以在這里找到。 注意，雖然是掃碼體驗，但是AlloyTouch.FullPag...
摘要：之前總結(jié)了事件捕獲和冒泡以及阻止事件傳播，今天寫一下事件代理方面的總結(jié)事件之捕獲冒泡阻止事件傳播事件代理監(jiān)聽列表中多項時，實現(xiàn)點擊控制臺打印對應(yīng)文本，如下蘋果香蕉葡萄首先想到的對每一個進行監(jiān)聽或者使用和的區(qū)別是屬性，是方法。 之前總結(jié)了事件捕獲和冒泡以及阻止事件傳播，今天寫一下事件代理方面的總結(jié)DOM 事件之捕獲、冒泡：阻止事件傳播： 事件代理 監(jiān)聽列表中多項 li 時，實現(xiàn)點擊 li...
閱讀 3489·2021-09-02 15:41
閱讀 2907·2021-09-02 09:48
閱讀 1458·2019-08-29 13:27
閱讀 1225·2019-08-26 13:37
閱讀 893·2019-08-26 11:56
閱讀 2549·2019-08-26 10:24
閱讀 1727·2019-08-23 18:07
閱讀 2674·2019-08-23 15:16
