在变量 ID 或 class 不是像素数处停止鼠标滚动

Question

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

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

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

我的破Fiddle： http://jsfiddle.net/mikeloucas/d7o8exub/52/

P.S。我正在制作动画，所以我试图让用户保持红色 div，直到他们单击 "stop the scroll" 按钮。（我让那部分在其他地方工作，而不是在这里，但它是基于像素的。）

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

在变量 ID 或 class 不是像素数处停止鼠标滚动

Stop Mouse Scrolling at a variable ID or class NOT a pixel number

javascript

variables

jquery

scrolltop

jquery-pagescroller