【问题标题】:Fullpage.js - Can I move through whole page with a down/up arrow key?Fullpage.js - 我可以使用向下/向上箭头键移动整个页面吗?
【发布时间】:2017-11-22 16:35:25
【问题描述】:

我有一个简单的问题。我可以使用相同的箭头键滚动部分幻灯片吗?

例如,我有一个页面,其中包含 3 个部分和 3 张幻灯片。我想只使用向下/向上箭头键浏览所有屏幕(总共 5 个屏幕)。

提前致谢!

【问题讨论】:

  • 不能自己捕获关键事件并通过 fullpage.js API 处理吗?
  • 我当然可以。我问了我可能错过的任何其他选择:)

标签: javascript jquery fullpage.js


【解决方案1】:

当然可以。您可以通过使用 fullPage.js 选项 keyboardScrolling:false 禁用默认键事件,然后使用您想要的方法绑定您自己想要的键,例如 $.fn.fullpage.moveSetionDown$.fn.fullpage.moveSlideRight

请注意,使用keyboardScrolling: false 您还将禁用其他组合键,例如空格、shift + 空格、向上翻页、向下翻页、主页、结束... 您可以查看所有这些键绑定in the code itself

另外,如果您想使用鼠标滚轮滚动浏览所有页面,您可以使用Scroll Horizontally extension

【讨论】:

  • 谢谢,我会使用这个解决方案。实际上我正在使用 Scroll Horizo​​ntally 扩展,所以一切都很好。顺便提一句。谢谢你的工作! Fullpage.js 是一个很棒的工具 :)
【解决方案2】:

您可以将它用于所有要导航的元素:

    jQuery(function ($) {
               $('button').click(function () {

               $(".element1").stop().animate({ scrollTop: $(".element1")[0].scrollHeight }, 1000); //autoscroll to end of element1 on click on button    

               $(".element2").stop().animate({ scrollTop: $(".element2")[0].scrollHeight }, 1000); }); //autoscroll to end of element2 on click on button

如果这有帮助,请告诉我。

【讨论】:

  • 感谢您的回答,但这不是我想要的
猜你喜欢
  • 2018-10-23
  • 2022-11-17
  • 2023-03-27
  • 1970-01-01
  • 2010-09-21
  • 2012-01-16
  • 1970-01-01
  • 2017-07-22
  • 2011-01-02
相关资源
最近更新 更多