滚动事件以移动 div 并没有始终如一地朝着正确的方向前进

Question

我正在尝试根据当前视图中的 div 和滚动方向将固定 div（每个 .container_fluid）移动到视图中。我正在使用 javascript 和 jquery。在大多数情况下，它在朝一个方向（从开始到结束或从结束到开始）时起作用，但是如果我在鼠标/触控板上更改方向，则滚动在一个滚动事件中朝错误的方向前进，然后再朝预期的方向前进在下一个滚动事件中（如果有意义的话）。

例如，如果您向下-向下-向上-向上，它会像您向下-向下-向下-向上一样移动，我认为这可能是我使用布尔状态的方式出错，但我不确定如何修复它。

向下滚动应显示下一个 div，向上滚动应显示前一个 div。此外，如果您背靠背滚动太快，则 div 有一段时间不会移动（我该如何解决这个问题？我将 debounce 函数设置为 100 毫秒）。

jsfiddle here

<div class="container-fluid" id="home">
  <h1>HOME</h1>
</div>

<div class="container-fluid" id="typetester_patternmaker">
  <div class="row">
    <div class="col-6" id="typetester">
      <h2>TYPE TESTER</h2>
      <p>(ttpm_on = 1)</p>
      </div>
    <div class="col-6" id="patternmaker">
      <h2>PATTERN MAKER</h2>
    </div>
  </div>
</div>

<div class="container-fluid" id="structure_precedents">
  <div class="row">
    <div class="col-6" id="structure" autofocus>
      <h2>LETTERFORM STRUCTURE</h2>
      <p>(ttpm_on & sp_on = 1)</p>
    </div>
    <div class="col-6" id="precedents">
      <h2>PRECEDENTS</h2>
    </div>
  </div>
</div>

<div class="container-fluid" id="download_colophon">
  <div class="row">
    <div class="col-6" id="download">
      <h2>DOWNLOAD</h2>
      <p>(ttpm_on, sp_on, & dc_on = 1)</p>
    </div>
    <div class="col-6" id="colophon">
      <h2>COLOPHON</h2>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js/nav.js"></script>

$(document).ready(function() {

// mouse structure & nav
var ttpm_on = 0,
  sp_on = 0,
  dc_on = 0,
  menu_on = 0;
var startScroll = $(document).height() / 2;
var lastScrollTop = startScroll;

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

  // these four functions are to navigate to their div
function ttpm() {
  ttpm_on = 1; // ttpm_on = 1 means the #typetester_patternmaker div is in view (i.e. div is positioned with top = 0)
  sp_on = 0;
  dc_on = 0;
  $("#typetester_patternmaker").animate({
    top: '0vh',
  }, 1000, function() {});
  $("#structure_precedents").animate({
    top: '100vh',
  }, 1000, function() {});
  $("#download_colophon").animate({
    top: '100vh',
  }, 1000, function() {});
}
$("#typetester_patternmaker, #typetester_patternmaker_button").click(function() {ttpm()} );

function sp() {
  ttpm_on = 1;
  sp_on = 1;
  dc_on = 0;
  $("#structure_precedents").animate({
    top: '0vh',
  }, 1000, function() {});
  $('h2').animate({
    'padding-top': '3vh',
  }, 1000, function() {});
  $("#typetester_patternmaker").animate({
    top: '0vh',
  }, 1000, function() {});
  $("#download_colophon").animate({
    top: '100vh',
  }, 1000, function() {});
}
$("#structure_precedents, #structure_precedents_button").click(function() {sp()} );

function dc() {
  ttpm_on = 1;
  sp_on = 1;
  dc_on = 1;
  $("#download_colophon").animate({
    top: '0vh',
  }, 1000, function() {});
  $('h2').animate({
    'padding-top': '3vh',
  }, 1000, function() {});
  $("#structure_precedents").animate({
    top: '0vh',
  }, 1000, function() {});
  $("#typetester_patternmaker").animate({
    top: '0vh',
  }, 1000, function() {});
}
$("#download_colophon, #download_colophon_button").click(function() {dc()} );

function hb() {
  ttpm_on = 0;
  sp_on = 0;
  dc_on = 0;
  $("#structure_precedents").animate({
    top: '90vh',
  }, 1000, function() {});
  $("#typetester_patternmaker").animate({
    top: '85vh',
  }, 1000, function() {});
  $("#download_colophon").animate({
    top: '95vh',
  }, 1000, function() {});
  $('h2').animate({
    'padding-top': '0.75vh',
  }, 1000, function() {});
}
$("#home_button").click(function() {hb()} );

// scroll nav
var scrollNav = debounce(function() {
  var st = $(window).scrollTop();
  if (ttpm_on == 0) {
    if (st > lastScrollTop) { ttpm(); }
  } 
  else if (ttpm_on == 1 && sp_on == 0) {
    if (st > lastScrollTop) { sp(); } 
    else { hb(); }
  } 
  else if (ttpm_on == 1 && sp_on == 1 && dc_on == 0) {
    if (st > lastScrollTop) { dc(); }
    else { ttpm(); }
  } 
  else if (ttpm_on == 1 && sp_on == 1 && dc_on == 1) {
    if (st <= lastScrollTop) { sp(); }
  }
  lastScrollTop = st;
}, 100, true);

window.onscroll = function() { scrollNav() };
});

Answer 1

添加了一个超时函数，用于检索更新后的 scrollTop() 值，并使 lastScrollTop 等于 scrollTop() 而不是 st：

var scrollNav = debounce(function(){
  var st = window.pageYOffset || document.documentElement.scrollTop;
  if (st > lastScrollTop) {
    if (ttpm_on == 0) { ttpm(); }
    else if (ttpm_on == 1 && sp_on == 0) { sp(); }
    else if (ttpm_on == 1 && sp_on ==1 && dc_on == 0) { dc(); }
  }
  else {
    if (ttpm_on == 1 && sp_on == 0) { hb(); }
    else if (ttpm_on ==1 && sp_on == 1 && dc_on == 0) { ttpm(); }
    else if (ttpm_on ==1 && sp_on == 1 && dc_on == 1) { sp(); }
  }
  setTimeout(function(){
    lastScrollTop = $(window).scrollTop();
  }, 750)
}, 75, true);

需要超时，因为我的 div 有 750 毫秒的定时转换……在终于找到这些帖子后想通了：https://stackoverflow.com/a/47372932/11325012 和https://stackoverflow.com/a/37499427/11325012。仍然不是 100% 万无一失，但它现在朝着正确的方向发展。