mousewheel and if statements jquery

mousewheel and if statements jquery

本文关键字：jquery statements if and mousewheel      更新时间：2023-09-26

我想做的是，当你尝试向上或向下滚动时，它会调用一个函数来改变页面。我的身体有overflow:hidden

我使用jquery插件https://github.com/jquery/jquery-mousewheel'>mousewheel

这是我的代码:

$('#body').on('mousewheel', function(event) {
  if( event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0 ) {
    //scroll down
    if(document.getElementById('pgcount').innerHTML == 'Page 1') scrollDown(2);
    if(document.getElementById('pgcount').innerHTML == 'Page 2') scrollDown(3);
    if(document.getElementById('pgcount').innerHTML == 'Page 3') scrollDown(4);
    if(document.getElementById('pgcount').innerHTML == 'Page 4') scrollDown(5);
  } else {
    //scroll up
    if(document.getElementById('pgcount').innerHTML == 'Page 2') scrollUp(1);
    if(document.getElementById('pgcount').innerHTML == 'Page 3') scrollUp(2);
    if(document.getElementById('pgcount').innerHTML == 'Page 4') scrollUp(3);
    if(document.getElementById('pgcount').innerHTML == 'Page 5') scrollUp(4);
  }
  //prevent page fom scrolling
  return false;
});

由于某些原因，它可以在向上滚动时工作，但当你向下滚动时，它直接进入第5页(最后一个)。当我将console.log(document.getElementById('pgcount').innerHTML)添加到每个if语句用于向下滚动时，它记录如下:

Page 1
Page 2
Page 3
Page 4

我不明白为什么它可以向上滚动而不能向下滚动。我知道被调用的函数(scrollDown)不是问题，因为它在从控制台调用时工作。

Thanks in advance

假设scrollDown()函数改变了页面值，解决方案很清楚:

if(document.getElementById('pgcount').innerHTML == 'Page 1') scrollDown(2);
if(document.getElementById('pgcount').innerHTML == 'Page 2') scrollDown(3);
if(document.getElementById('pgcount').innerHTML == 'Page 3') scrollDown(4);
if(document.getElementById('pgcount').innerHTML == 'Page 4') scrollDown(5);

如果您在第1页，代码调用scrollDown(2)，将您移动到第2页。然后代码立即检查您是否在第2页，如果是，则滚动到第3页。这个过程一直重复到第5页。

如果您明确地跟踪页面而不是查看页面文本，事情将会干净得多。然而，最简单的方法就是添加else:

if(document.getElementById('pgcount').innerHTML == 'Page 1') scrollDown(2);
else if(document.getElementById('pgcount').innerHTML == 'Page 2') scrollDown(3);
else if(document.getElementById('pgcount').innerHTML == 'Page 3') scrollDown(4);
else if(document.getElementById('pgcount').innerHTML == 'Page 4') scrollDown(5);
相关文章：