当元素的底部与窗口的底部对齐时触发事件

Question

我正在执行一个简单的视差，但是我想在相关元素的底部与窗口的底部齐平时触发视差。

我已经使用了实际的视差，但是接下来的部分很难证明。我以为我会以某种方式使用offsetTop吗？并减去我正在视差的元素的高度，但是读取MDN文档offsetTop只给您相对于最近的父级的偏移量？在此示例中，有问题的元素是另一个容器元素的子元素。

如果有人知道当所需元素的底部与窗口的底部对齐时如何触发视差功能的方法，那么会令人惊讶。

**注意-我不能使用IntersectionOberver，因为它会在使用Greensock的页面的其他方面造成可怕的动画颠簸。

Codepen：https://codepen.io/emilychews/pen/BbxZJp

function parallax() {
  
  window.addEventListener('scroll', function(e) {

    var parallaxItem = document.getElementsByClassName("parallax");

    var scrolled = window.pageYOffset,
        bottomOfWindow = (window.pageYOffset + window.innerHeight);
        
        // bottomOfParallaxItem = the bit I need help with

    for (i=0; i < parallaxItem.length; i++) {

      parallaxItem[i].style.transform = 'translateY(-' + (scrolled * .2) + "px" + ")";

    }

  });

}

requestAnimationFrame(parallax);

* {box-sizing: border-box;}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 300vh;
  margin: 0;
  padding: 0;
  font-family: arial-black;
}

.outer-container {
  display: grid;
  justify-items: center;
  align-items: center;
  width: 50%;
  height: 80%;
  background: #e6e6e6;
}

.inner-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: red;
  width: 50%;
  height: 50%;
}

<div class="outer-container">
  <div class="inner-container parallax">
    <p>Bottom of this container</p>
  </div>
</div>