使用鍵盤自動滾動 - 但僅限於某些部分 - 使用fullpage.js時

我正在使用fullpage.js（v 2.7.9）的beta版，該版可找到here，並且其中有一個名爲hybrid的新設置。當此設置設置爲true時，默認情況下，用戶可以通過觸控板手勢自動滾動/跳過某個部分。但是，如果功能檢測到某個部分的類別爲fp-normal-scrolling，則功能設置hybrid: true將關閉自動滾動功能。因此，當這個類出現時，混合是「真實」的，滾動行爲變得緩慢和增量，移動通過一個部分，而不是在部分之間跳轉。因此，使用這種新設置，您可以跳到下一節或慢慢滾動，只需添加一個類 - 非常酷！使用鍵盤自動滾動 - 但僅限於某些部分 - 使用fullpage.js時

這是一個jsfiddle，由fullpage.js作者編寫，演示了這種優秀的混合行爲。 http://jsfiddle.net/97tbk/1191/如果您在查看第一部分時使用觸控板進行滾動，它會跳轉，但是如果您在後續所有部分上使用觸控板滾動，則滾動速度會很慢且增量較慢（因爲「fp-normal-scrolling」類已添加到每個部分）。

下面是從的jsfiddle相同的HTML：

<div id="fullpage"> 
    <div class="section">One</div> 
    <div class="section fp-normal-scroll"> 
class="section">One</div> 
    <div class="slide">Two 2</div> 
</div> 
<div class="section fp-normal-scroll">Three</div> 
<div class="section fp-normal-scroll">Four</div> 
</div>

這裏是雜交的JavaScript：（你必須添加全頁的js和css文件這個工作）

$('#fullpage').fullpage({ 
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'], 
    hybrid:true, 
    fitToSection: false 
});

我的問題：我想能夠讓鍵盤上的向下箭頭有這種相同的真棒混合/混合行爲，但我無法弄清楚如何做到這一點。所以說白了，在某些部分，我希望向下箭頭鍵導致段落跳轉，而在其他部分，我希望向下箭頭鍵允許用戶遞增/慢慢滾動段落，而不跳過。但是，據我所知，這種混合行爲尚不適用於鍵盤。我可以確定兩個相關的設置。

第一個是autoScrolling。我可能關閉自動滾屏，我可以在最後頁面上增加滾動（這是可取的），但如果它關閉，我失去了使用鍵盤從第一部分跳轉到第二。不好。 :(

，我可以找出是setKeyboardScrolling其他潛在有用的設置。這似乎使用戶要麼使用鍵盤來導航與否。

雖然我曾與開發人員交流（你可以閱讀我們的談話here）我仍然想不通的設置組合，讓我：

總是有
鍵盤有鍵盤生產部分跳上一些教派離子
讓鍵盤在其他部分產生慢/增量滾動。

Fullpage.js可能還沒有提供，但我很樂觀。由於這種類型的混合行爲已經包含在手勢滾動的測試版中，因此具有足夠的javascript/jquery知識的人可能會想出一個修復方案，以允許向下箭頭按鈕具有相同的混合功能。也許代碼來自fullpage的手勢控制部分。JS可以被重寫爲適用於鍵盤控件/向下箭頭鍵？

我會自己嘗試，但我沒有足夠的熟練的JavaScript。 你們能想出一個解決辦法嗎？我不在乎解決方案是否包含一組fullpage.js設置或對fullpage.js的調整。我會很高興與任何解決方案。

謝謝！

更新：我得到了有關如何實現這一目標的開發人員的回覆，但我不明白。有人可能會告訴我他的意思。這是他寫道：

只需使用一個回調，並設置它的任何其他部分，而不是使用setKeyboardScrolling一日一。

來源

2016-04-13 CoderScissorhands

正如我所說的，使用回調並調用fullpage.js方法setKeyboardScrolling有自己的邏輯，在這種情況下，我們只有index == 1其設置爲true。（即，當我們在第1節）

$('#fullpage').fullpage({ 
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'], 
    hybrid:true, 
    fitToSection: false, 
    afterLoad: function(anchorLink, index){ 
     $.fn.fullpage.setKeyboardScrolling(index === 1); 
    } 
});

注意hybrid選項未記錄其特徵是，預計在所有可能的情況下可能無法正常工作。

Working demo

來源

2016-04-14 09:21:00 Alvaro

這正是我想要實現的。感謝您的幫助，Alvaro！ – CoderScissorhands

使用鍵盤自動滾動 - 但僅限於某些部分 - 使用fullpage.js時

回答

相關問題