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