javascript - 停止鼠标滚动到变量 ID 或类而不是像素数

Question

我试图停止滚动变量而不是像素测量。

粉色是我页面的顶部，黄色没什么特别的，但红色是我试图使用变量调用我选择的 ID 来停止滚动操作的地方。用户应该仍然能够向上滚动，但永远不要滚动到红色 div 之外。

我发现了一些使用像素的示例，但我的页面改变了高度，因此我尝试使用变量而不是像素位置来定位 div 中的 id。

我坏掉的 fiddle : http://jsfiddle.net/mikeloucas/d7o8exub/52/

附注我正在制作一个动画，所以我试图让用户保持在红色 div 上，直到他们单击“停止滚动”按钮。 (我让该部分在其他地方工作，而不是在这里，但它是基于像素的。)

$(document).ready(function() {
  var StartTop = $("#beginning").offset().top;

  /* $(document).scrollTop(StartTop); */
  var EndGame = $("#stopHere").height();

  $(document).on("scroll", function(e) {
    var windowScrollTop = $(window).scrollTop();
    if (windowScrollTop < EndGame) {
      $(document).scrollTop(EndGame);
    } else if (windowScrollTop > EndGame) {
      $(document).scrollTop(StartTop);
    }
  });
});

body {
  margin: 0;
}

#beginning {
  height: 200px;
  background: pink;
}

.genBox {
  height: 500px;
  background: yellow;
  width: 90%;
  margin: 0 auto;
}

#stopHere {
  height: 500px;
  background: red;
  width: 90%;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="beginning"></div>
<div class="genBox"></div>
<div class="genBox"></div>
<div id="stopHere"></div>
<div class="genBox"></div>

Answer 1

如何根据div的位置设置滚动位置？不太确定这是否是您正在寻找的...

const lowDivTop = document.getElementById('low').getBoundingClientRect().top + window.scrollY
document.addEventListener('scroll', e => {
    window.scrollTo(0, Math.min( lowDivTop - window.innerHeight, window.scrollY));
})

#top, #mid, #low{
  width: 100px;
  height: 200px;
}
#top{
  background: yellow
}
#mid{
  background: orange
}
#low{
  background: red
}

<div id='top'></div>
<div id='mid'></div>
<div id='low'></div>