Question

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

这是一个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。我可以关闭autoScrolling，我可以在最终页面上进行增量滚动（这是可取的），但如果它关闭，我将无法使用键盘跳转第一节到第二节。不好。：（

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

虽然我与开发人员进行了交流（你可以阅读我们的对话here）但我仍然无法找到允许我这样做的设置组合：

始终使用键盘
让键盘生成部分跳过部分部分
让键盘在其他部分生成慢速/增量滚动。

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

我会自己尝试，但我在javascript中不够熟练。 你们中的任何人都可以提出修复吗？我不在乎解决方案是否涉及一组fullpage.js设置或调整到fullpage.js。我对任何解决方案都很满意。

谢谢！

更新：我得到了开发人员关于如何实现这一目标的回复，但我不明白。有人可能会告诉我他的意思。这就是他写的：

只需使用回调并将其设置为其他任何部分比使用setKeyboardScrolling的第一个。

Answer 1

正如我所说，使用回调并使用您自己的逻辑调用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

使用fullpage.js时

1 个答案: