Fullpage.js-键盘垂直滚动 [英] Fullpage.js - Vertical Scroll with Keyboard

问题描述

我希望有人可以帮助我解决以下问题.

I am hoping someone can help me with my issue below.

我正在使用Fullpage.js( https://github.com/alvarotrigo/fullPage.js/)插件来创建一个页面在其中水平移动的网站.该插件旨在创建整页站点，在该站点中，通过滚动或按下键可以垂直滚动浏览每个部分，就像视差站点一样.

I am using Fullpage.js (https://github.com/alvarotrigo/fullPage.js/) plugin to create a site where pages move horizontally. The plugin is designed to create full page sites where it vertically scrolls through each section, by scrolling or pressing down the keys, just like a parallax site.

在我的文件中，我仅使用一个带有左右箭头的区域来包含我的多个页面以进行水平滚动.就像 http://alvarotrigo.com/fullPage/examples/scrolling.html 上的示例一样由于我没有多个部分，因此当我按下上/下键时，它根本不会滚动内容.

In my file, I am only using the one section with left and right arrows to contain my multiple pages for horizontal scrolling. Like the example on http://alvarotrigo.com/fullPage/examples/scrolling.html Since I don't have multiple sections, when I hit the up/down keys it doesn't scroll the content at all.

任何建议将不胜感激. 预先感谢！

Any suggestions would be greatly appreciated. Thanks in advance!

推荐答案

只需将整页功能moveSlideRight和moveSlideLeft分配给您的按键事件，并使用$.fn.fullpage.setKeyboardScrolling(false)

Just assign the fullpage functions moveSlideRight and moveSlideLeft to your keydown events and turn off the default keyboard scrolling of fullpage.js by using $.fn.fullpage.setKeyboardScrolling(false)

$(document).keydown(function (e) {
    var shiftPressed = e.shiftKey;

    switch (e.which) {
        //up
        case 38:
        case 33:
            $.fn.fullpage.moveSlideLeft();
            break;

        //down
        case 40:
        case 34:
            $.fn.fullpage.moveSlideRight();
            break;

    }
});

在线演示

这篇关于Fullpage.js-键盘垂直滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！