如何使箭头跟随浏览器窗口，但停在其容器的末尾？

<div id="arrow"></div>

#arrow {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background-color: red;
  /* 添加箭头样式，这里使用CSS三角形技术 */
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid red;
}

window.addEventListener('scroll', function() {
  var arrow = document.getElementById('arrow');
  var container = document.getElementById('container'); // 假设容器的ID为container
  var containerRect = container.getBoundingClientRect();
  
  if (window.pageYOffset + window.innerHeight >= containerRect.bottom) {
    // 当滚动到容器底部时，将箭头固定在容器底部
    arrow.style.position = 'absolute';
    arrow.style.bottom = '0';
    arrow.style.transform = 'translateX(-50%)';
  } else {
    // 当滚动未到容器底部时，将箭头跟随浏览器窗口
    arrow.style.position = 'fixed';
    arrow.style.bottom = '0';
    arrow.style.transform = 'translateX(-50%)';
  }
});