Question

如何滚动元素的百分比，但视口的顶部为0％，底部为100％。该Codepen向下滚动绿色.wrapper元素，以基于视口的顶部设置百分比。我希望当视口的底部（而不是顶部）通过.wrapper的底点（保留视口的顶部作为起点）时为100％。

ParameterDirection.Output

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

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

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

1 个答案: