如何使用Javascript（也是桌面）创建下拉弹性效果？

Question

我想创建一种效果，当您过度滚动窗口时，它会在页脚区域下方并在弹回后立即创建一个白色内容的小区域。另外，当我滚动时，我需要在特定元素上添加一个类。

您能帮忙吗？

Answer 1

您实际上是在问两个问题，所以我会尽力回答第二个问题。如果添加了超滚动区域（只是一个扩展页面长度的空白元素）并监视滚动活动，则可以测试用户是否已滚动超出该范围。我认为，如果您的页面太短以至于该元素仍然在视图中，那么好的事情就不会发生，但这只是一个开始。另外，如果您想要反弹的效果，可以使用@Run_Script指出的jQuery插件，或者如果想弄脏手，可以尝试使用计时器使滚动动画的plain vanilla method。

function onScroll() {
  var marker = document.getElementById('bottom')
  var markerLocation = marker.getBoundingClientRect().top
  var pageLocation = document.documentElement.clientHeight || window.innerHeight
  if (markerLocation < pageLocation) {
    document.getElementById('bigblock').className = 'lightblock'
  } else {
    document.getElementById('bigblock').className = 'darkblock'
  }
}
document.onscroll = onScroll

#bigblock {
  height: 120vh;
  width: 75vw;
}
div.darkblock {
  background-color: gray;
}
div.lightblock {
  background-color: lightgray;
}
#bottom {
  height: 20vh;
  width: 100vw;
}

<div id="bigblock" class="darkblock"></div>
<div id="bottom"></div>