Javascript 如何在鼠标滚轮的滚动上触发单击事件（5个部分）

我设置了5个部分，所有部分都是固定位置。激活时，在CSS中以100 VH的速度在窗口中查看该部分。其他人在-100vh的机翼上等待。当单击左侧的链接时，1秒后，活动部分会有多个转换来完成它的工作，然后1秒后，单击的部分将成为新的活动部分，并会出现一个转换。这些都是设置和工作的伟大！但是客户端希望在滚动鼠标滚轮时出现鼠标事件。问题是，实际上并没有一个滚动条，因为我使用所有固定的定位设置了它。当您滚动滚轮时，它会触发下一节的单击事件，如何使代码正常工作？或者，如果向上滚动，则返回上一节？我对Jquery不是很有经验，所以我下面的代码可能看起来很长，很凌乱。也许可以简化。总共有5个单击事件函数，其余的负责转换。如果#SlideItem3处于活动状态，并且您在鼠标滚轮上向上滚动一次，我希望#SlideItem2处于活动状态。或者如果您在#SlideItem3上并向下滚动，我希望#SlideItem4处于活动状态。我仍然想保持链接，以便能够点击左侧导航也。任何帮助都将不胜感激

 $( document ).ready(function() {

  $("#SlideLink1").click(function() {

  /* Do transition Stuff */
  /* Removes all Active Classes */
  /* Add Class to make #SlideItem1 Active */

  });

  $("#SlideLink2").click(function() {

  /* Do transition Stuff */
  /* Removes all Active Classes */
  /* Add Class to make #SlideItem2 Active */

  });

  $("#SlideLink3").click(function() {

  /* Do transition Stuff */
  /* Removes all Active Classes */
  /* Add Class to make #SlideItem3 Active */

   });

    $("#SlideLink4").click(function() {

  /* Do transition Stuff */
  /* Removes all Active Classes */
  /* Add Class to make #SlideItem4 Active */

  });

    $("#SlideLink5").click(function() {

  /* Do transition Stuff */
  /* Removes all Active Classes */
  /* Add Class to make #SlideItem5 Active */

  });

  });

HTML

幻灯片1标题
幻灯片2标题
幻灯片3标题
幻灯片4标题
幻灯片5标题

看起来您在寻找jQuery的.Scroll（）方法

差不多

$(body).scroll(funtion() {

// Work out location stuff such as what section is showing currently

// Depending on above^ run suitable function
switch (desiredSection) {
    case section1:
        animateToSection1();
        break;
    case section2:
        animateToSection2();
        break;
    case section3:
        animateToSection3();
        break;
    default:
        // Do default/fallback option
}

});

---

这就是最终对我有用的东西。我也使用相同的概念来检查导航活动项

$( document ).ready(function() {
 $('body').bind('mousewheel', function(e){

 /* Scrolling Up */
 if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {

 var activeItem = $(".slideitem.active"); /* Current Active Slide */ 
 var prevItem = $(".slideitem.active").prev();  /* Find Prev Slide */

/* If First Item, do nothing, else Remove Active class and place on prev class */
if($(activeItem).is(':first-child')) { 

} else {

  $(activeItem).removeClass("active");
  $(prevItem).addClass("active");

}


 } else { 

 /* Scrolling Down */

 var activeItem = $(".slideitem.active"); /* Current Active Slide */
 var nextItem = $(".slideitem.active").next(); /* Find Next Slide */ 


/* If Last Item, do nothing, else Remove Active class and place on next class */
if($(activeItem).is(':last-child')) { 
} else {

  $(activeItem).removeClass("active"); 
  $(nextItem).addClass("active"); 

}

}

 }); 
}); 

$（文档）.ready（函数（）{
$（'body'）.bind（'mouseweell'，函数（e）{
/*向上滚动*/
如果（e.originalEvent.wheelDelta>0 | | e.originalEvent.detail<0）{
var activeItem=$（“.slideitem.active”）；/*当前活动幻灯片*/
var previItem=$（“.slideitem.active”）.prev（）；/*查找上一张幻灯片*/
/*如果是第一项，则不执行任何操作，否则删除活动类并放置在上一个类上*/
如果（$（activeItem）.is（':first child'）{
}否则{
$（activeItem）.removeClass（“active”）；
$（previitem）.addClass（“活动”）；
}
}否则{
/*向下滚动*/
var activeItem=$（“.slideitem.active”）；/*当前活动幻灯片*/
var nextItem=$（“.slideitem.active”）.next（）；/*查找下一张幻灯片*/
/*如果是最后一项，则什么也不做，否则删除活动类并放置在下一个类上*/
如果（$（activeItem）.is（':last child'）{
}否则{
$（activeItem）.removeClass（“active”）；
$（nextItem）.addClass（“活动”）；
}
}
}); 
}); 

我只需要知道如何在滚动鼠标滚轮时触发单击，我还添加了HTML。任何帮助都将不胜感激！因为根本没有滚动，我是否必须删除固定位置？啊，我明白你的意思，我不确定如果没有滚动，滚动是否会触发happening@PhilM您可能会显示所有5个部分（每个100vh），并使用滚动处理程序在它们之间上下滑动，但我不知道你正在做的动画会如何。谢谢你的帮助！是的，因为我建造它的方式，我还没有完全弄明白。动画的工作方式是，无论哪个方向或哪个幻灯片，动画总是从活动屏幕向上滑动，然后新的活动屏幕从底部向上滑动。这就是他们所要求的，这就是为什么我使用固定定位与常规堆叠部分。然后他们要求鼠标滚轮动作，这就是我被难倒的地方。如果我能根据鼠标滚轮所在幻灯片的记录触发点击，那就太完美了。

$( document ).ready(function() {
 $('body').bind('mousewheel', function(e){

 /* Scrolling Up */
 if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {

 var activeItem = $(".slideitem.active"); /* Current Active Slide */ 
 var prevItem = $(".slideitem.active").prev();  /* Find Prev Slide */

/* If First Item, do nothing, else Remove Active class and place on prev class */
if($(activeItem).is(':first-child')) { 

} else {

  $(activeItem).removeClass("active");
  $(prevItem).addClass("active");

}


 } else { 

 /* Scrolling Down */

 var activeItem = $(".slideitem.active"); /* Current Active Slide */
 var nextItem = $(".slideitem.active").next(); /* Find Next Slide */ 


/* If Last Item, do nothing, else Remove Active class and place on next class */
if($(activeItem).is(':last-child')) { 
} else {

  $(activeItem).removeClass("active"); 
  $(nextItem).addClass("active"); 

}

}

 }); 
});