鼠标滚轮和 if 语句 jquery

Question

我想做的是，当您尝试向上或向下滚动时，它会调用一个更改页面的函数。我的 body 有 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 页，如果是，它会滚动到第 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);

鼠标滚轮和 if 语句 jquery

mousewheel and if statements jquery

html

javascript

jquery

scroll

mousewheel