时间戳

首页 > 解决方案 > 获取以视口顶部和底部为锚点的元素滚动百分比

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

问题描述

如何获得滚动元素的百分比，但视口的顶部为 0%，底部为 100%。此 codepen 向下滚动绿色 .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

标签： javascriptjquery

解决方案

这看起来像是十字路口观察员的工作

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

首先你必须创建观察者：

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:
  });
};

推荐阅读