使用鼠标滚动事件触发 Bootstrap off canvas

Question

我有一个底部的画布，我想用鼠标向下滚动来触发它，并想在滚动到页面顶部时关闭画布。现在我有一个按钮可以触发关闭画布，另一个按钮可以关闭它。有什么办法可以实现这个，如果可能的话，我也想保留按钮来触发关闭画布。

我在网上搜索，找不到任何解决方案。

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

这是我使用的示例，是否可以使用鼠标滚动切换关闭画布？