获取以视口顶部和底部为锚点的元素滚动百分比

Question

如何获得元素滚动的百分比，但视口顶部为0%，底部为100%。这段代码向下滚动绿色的.wrapper元素，根据视口顶部设置百分比。当视口的底部(而不是顶部)通过.wrapper的底点(保留视口的顶部作为起点)时，我希望它是100%。

​

$(document).ready(function() {
  var el = $(".wrapper");
  var wrapperHeight = el.outerHeight();
  var wrapperTop = el.offset().top;
  var wrapperBottom = el.offset().top + wrapperHeight;


  $(window).bind('scroll', function() {
    var scrolled = $(window).scrollTop();
    if (scrolled > wrapperTop && scrolled < wrapperBottom) {
      var percentageScrolled = ((scrolled - wrapperTop) / wrapperHeight) * 100;
      $(".scrolled").text(parseInt(percentageScrolled));
    }
  });

});

.page {
  height: 10000px;
  background: red;
  padding-top: 1000px;
}

.wrapper {
  height: 1500px;
  background: green;
}

.scrolled {
  position: fixed;
  top: 10px;
  right: 30px;
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page">
  <div class="wrapper">

  </div>
</div>

<p class="scrolled"></p>

​

https://codepen.io/tornadokent/pen/wLyLvr

Answer 1

这看起来像是Intersection Observer的作业

这样，您就可以在一个或多个元素(基于选择器)变得可见或离开页面时触发回调函数。

首先，您必须创建观察者：

var options = {
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

然后你设定一个应该关注的目标：

var target = document.querySelector('.wrapper');
observer.observe(target);

在此之后，您只需定义进入(在本例中为离开)视口的每个元素应该发生的情况：

var callback = function(entries, observer) { 
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // target element:
  });
};