Question

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

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

向下滚动应显示下一个div，向上滚动应将上一个div引入视图。另外，如果您以太快的速度来回滚动，则div暂时不会移动（我该如何解决？我将防抖功能设置为100ms）。

jsfiddle here

    a = df['Log GDP per capita'].max()
    b = df['Log GDP per capita'].min()

    df['Log GDP per capita'] = df['Log GDP per capita'].apply(lambda x:((x-b)/(a-b)))

<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>

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的转换时间为750ms，所以需要超时...在最终找到以下帖子后发现：https://stackoverflow.com/a/47372932/11325012和https://stackoverflow.com/a/37499427/11325012。仍然不是100％防呆，但它现在朝着正确的方向发展。

滚动事件以使div移动方向不一致

1 个答案: