如何在滚动时更改文本的不透明度，但仅当在窗口中时？

<div class="scroll-container">
  <p class="scroll-text">这是滚动时更改不透明度的文本。</p>
</div>

.scroll-container {
  height: 500px;
  overflow-y: scroll;
}

.scroll-text {
  opacity: 0.5; /* 默认透明度 */
  transition: opacity 0.5s ease; /* 添加过渡效果 */
}

window.addEventListener('scroll', function() {
  var scrollContainer = document.querySelector('.scroll-container');
  var scrollText = document.querySelector('.scroll-text');
  var containerRect = scrollContainer.getBoundingClientRect();
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

  if (containerRect.top < window.innerHeight && containerRect.bottom >= 0) {
    // 文本容器在可视窗口中
    var opacity = 1 - (scrollTop - containerRect.top) / window.innerHeight;
    scrollText.style.opacity = opacity.toFixed(2); // 设置透明度，保留两位小数
  }
});