如何在元素中向下滚动时向上展开元素？

<div class="container">
  <div class="scrollable">
    <!-- 滚动区域的内容 -->
  </div>
  <div class="expandable">
    <!-- 展开区域的内容 -->
  </div>
</div>

.container {
  position: relative;
  overflow: auto;
  height: 200px; /* 设置滚动区域的高度 */
}

.expandable {
  display: none; /* 初始状态下隐藏展开区域 */
}

var scrollable = document.querySelector('.scrollable');
var expandable = document.querySelector('.expandable');
var lastScrollTop = 0;

scrollable.addEventListener('scroll', function() {
  var scrollTop = scrollable.scrollTop;

  if (scrollTop > lastScrollTop) {
    // 向下滚动，展开区域显示
    expandable.style.display = 'block';
  } else {
    // 向上滚动，展开区域隐藏
    expandable.style.display = 'none';
  }

  lastScrollTop = scrollTop;
});