鼠标滚轮和 if 语句 jquery

Question

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

我正在使用名为 https://github.com/jquery/jquery-mousewheel'>mousewheel 的 jquery 插件

这是我的代码：

$('#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) 不是问题，因为它在从控制台调用时可以工作。

提前致谢

Answer 1

假设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);