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

Question

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

这是一个由 fullpage.js 作者编写的 jsfiddle，它演示了这种出色的混合行为。 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
});

我的问题:我希望键盘上的向下箭头能够具有同样令人敬畏的混合/混合行为，但我不知道该怎么做。简单地说，在某些部分上，我希望向下箭头键导致部分跳转，而在其他部分上，我希望向下箭头键允许用户增量/缓慢地滚动各部分，而不跳过.但是，据我所知，这种混合行为尚不适用于键盘。我可以识别两个相关设置。

第一个是自动滚动。我可以关闭自动滚动，并且我可以在最后几页上进行增量滚动(这是可取的)，但是如果关闭它，我就无法使用键盘跳转第一节到第二节。不好。 :(

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

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

1. 始终打开键盘
2. 让键盘在某些部分上产生部分跳转
3. 让键盘在其他部分上产生缓慢/增量滚动。

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

我自己会尝试一下，但我对 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