如何让带有可滚动div的div不根据窗口大小滚动超过某个点？

<div class="parent">
  <div class="scrollable">
    <!-- 可滚动div的内容 -->
  </div>
</div>

.parent {
  position: relative;
  height: 400px; /* 设置父级div的固定高度 */
  overflow: hidden; /* 隐藏溢出的内容 */
}

.scrollable {
  height: 100%; /* 设置可滚动div的高度为父级div的高度 */
  overflow: auto; /* 显示滚动条 */
}

var scrollableDiv = document.querySelector('.scrollable');
var scrollPosition = 200; // 设置滚动位置

window.addEventListener('scroll', function() {
  if (window.pageYOffset > scrollPosition) {
    scrollableDiv.scrollTop = scrollPosition;
  }
});