使用键盘自动滚动 - 但仅适用于某些部分 - 使用 fullpage.js 时

Question

我正在使用 fullpage.js (v 2.7.9) 的测试版，可以在 here 上找到它，它具有一个名为 hybrid 的新设置。当此设置设置为 true 时，默认情况下，用户可以通过触控板以手势 autoScroll/jump 通过某个部分。但是，如果函数检测到某个部分具有 class fp-normal-scrolling，则函数设置 hybrid: true 将关闭自动滚动。因此，当此 class 存在且混合为 'true' 时，滚动行为变得缓慢且渐进，在一个部分中移动，而不是在部分之间跳转。因此，使用这个新设置，您可以跳转到下一部分或慢慢滚动浏览它，只需添加一个 class - 太酷了！

这是一个 jsfiddle，由 fullpage.js 作者编写，演示了这种出色的混合行为。 http://jsfiddle.net/97tbk/1191/ 如果您在查看第一部分时使用触控板滚动，它会跳转，但如果您在所有后续部分上使用触控板滚动，则滚动缓慢且递增（因为 "fp-normal-scrolling" class 已添加到每个）。

这是来自 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
});

我的问题：我希望键盘上的向下箭头具有同样令人敬畏的 mixed/hybrid 行为，但我不知道该怎么做它。所以说白了，在某些部分我希望向下箭头键导致部分跳转，而在其他部分我希望向下箭头键允许用户 incrementally/slowly 滚动浏览部分，没有跳过。但是，据我所知，这种混合行为还不适用于键盘。我可以确定两个相关设置。

首先是自动滚动。我可以关闭自动滚动，这样我就可以在最后一页上进行增量滚动（这是可取的），但如果它关闭，我将无法使用键盘从第一部分跳到第二部分。不好。 :(

我可以识别的另一个可能有用的设置是 setKeyboardScrolling。这似乎使用户能够使用键盘进行导航或不进行导航。

尽管我已经与开发人员进行了交流（您可以阅读我们的对话 here），但我仍然无法找出允许我进行以下操作的设置组合：

始终打开键盘
让键盘在一些部分
让键盘在其他部分产生 slow/incremental 滚动。

Fullpage.js 可能还没有提供这个，但我很乐观。因为这种类型的混合行为已经包含在手势滚动的测试版中，所以具有足够 javascript/jquery 知识的人可能会想出一个修复程序，允许向下箭头按下具有相同的混合功能。也许 fullpage.js 的手势控制部分的代码可以重写以应用于键盘 controls/down-arrow 键？

我会自己尝试，但我在 javascript 方面不够熟练。 你们能想出一个解决办法吗？我不在乎解决方案是否涉及一组 fullpage.js 设置或对 fullpage.js 的调整。我对任何解决方案都很满意。

谢谢！

更新：我收到了开发人员关于如何实现这一点的回复，但我不明白。有人可以告诉我他的意思吗？这是他写的：

Just use a callback for it and set it off for any other section rather than the 1st one by using setKeyboardScrolling.

Answer 1

正如我所说，使用回调并根据您自己的逻辑调用fullpage.js方法setKeyboardScrolling，在这种情况下，我们将仅在index == 1时将其设置为true。（即，当我们在第一节时）

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

请注意，hybrid 选项未记录在案，这意味着它可能无法在所有可能的情况下按预期工作。

Working demo

使用键盘自动滚动 - 但仅适用于某些部分 - 使用 fullpage.js 时

autoScrolling with keyboard - but only only for some sections - when using fullpage.js

javascript

keyboard

jquery

autoscroll

fullpage.js