检测鼠标滚动并调用函数

Question

对于 http://www.rawkey.co.in 我正在使用 fullpage.js。现在我不想单击箭头按钮来遍历页面，而是想使用鼠标滚轮来遍历页面。有人可以帮忙吗？来自 http://www.rawkey.co.in/js/jquery.fullpage.js:

    $(window).mousewheel(function(event, delta) {
      if (delta > 0){
        function moveSlideRight(section){
            moveSlide('right', section);
        }
      } // going down
      if(delta < 0){
        function moveSlideLeft(section){
            moveSlide('left', section);
        }
      } //going up
      event.preventDefault();
    });

Answer 1

如果您仍然需要这方面的帮助，请参阅下面我的工作片段（不要介意缺少 CSS :P）。

你必须注意，js是这样的：

在第一张幻灯片上向上滚动将转到 "Previous" 部分（如果存在）。
在最后一张幻灯片上向下滚动将转到 "Next" 部分（如果存在）。

您可能需要根据您的其他需要进行调整 ;)。

编辑

更正了错误消息 “$(...).moveSection[Up|Down] 不是一个函数” 因为不需要调用这些函数。

$('#fullpage').fullpage({
  //Navigation
  menu: '#menu',
  lockAnchors: false,
  anchors: [],
  navigation: false,
  navigationPosition: 'right',
  navigationTooltips: ['firstSlide', 'secondSlide', 'thirdSlide', 'fourthSlide'],
  showActiveTooltip: true,
  slidesNavigation: true,
  slidesNavPosition: 'bottom',

  //Scrolling
  css3: true,
  scrollingSpeed: 700,
  autoScrolling: true,
  fitToSection: true,
  fitToSectionDelay: 1000,
  scrollBar: false,
  easing: 'easeInOutCubic',
  easingcss3: 'ease',
  loopBottom: false,
  loopTop: false,
  loopHorizontal: true,
  continuousVertical: false,
  interlockedSlides: false,
  offsetSections: false,
  resetSliders: false,
  fadingEffect: false,
  normalScrollElements: '#element1, .element2',
  scrollOverflow: false,
  scrollOverflowReset: false,
  scrollOverflowOptions: null,
  touchSensitivity: 15,
  normalScrollElementTouchThreshold: 5,
  bigSectionsDestination: null,

  //Accessibility
  keyboardScrolling: true,
  animateAnchor: true,
  recordHistory: true,

  //Design
  controlArrows: true,
  verticalCentered: true,
  sectionsColor: ['#0061ff', '#ff0000'],
  paddingTop: '0',
  paddingBottom: '0px',
  fixedElements: '#header, .footer',
  responsiveWidth: 0,
  responsiveHeight: 0,

  //Custom selectors
  sectionSelector: '.section',
  slideSelector: '.slide',

  lazyLoading: true,

  //events
  onLeave: function(index, nextIndex, direction) {},
  afterLoad: function(anchorLink, index) {},
  afterRender: function() {},
  afterResize: function() {},
  afterResponsive: function(isResponsive) {},
  afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {},
  onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex) {}
});

$('.slide').on('mousewheel', function(e, delta) {

  if (delta == 1) { // Up

    // Move to previous section if this is first slide in slider
    if ($(this).is(":first-child"))
      return true;

    $('.fp-prev').trigger('click');
         e.preventDefault();
         e.stopPropagation();
  } else { // Down

    // Move to next section if this is last slide in slider
    if ($(this).is(":last-child"))
      return true;

    $('.fp-next').trigger('click');
     e.preventDefault();
     e.stopPropagation();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.5/jquery.fullpage.min.css" rel="stylesheet" />

<div id="fullpage">
  <div class="section">hey hey hey</div>
  <div class="section slider">
    <div class="slide"> Slide 1 </div>
    <div class="slide"> Slide 2 </div>
    <div class="slide"> Slide 3 </div>
    <div class="slide"> Slide 4 </div>
  </div>
  <div class="section">Ho ho ho</div>
</div>

Answer 2

最简单和最安全的方法是使用 fullpage.js 提供的 Scroll Horizontally extension。

这样：

您确保它与任何其他功能和扩展 100% 兼容。
您确保它不会因 fullpage.js 更新或 fullPage.js API 更改而停止。

现在是@Bladepianist 提出的解决方案：

不适用于触控设备。
会在动态滚动设备中产生问题。
不会与其他扩展程序兼容。
删除箭头时将不起作用。

检测鼠标滚动并调用函数

detect mouse scroll and call a function

jquery

fullpage.js