滚动到侧边栏的底部/顶部，然后滚动其余的内容

Question

我正在尝试创建一个有机会溢出和滚动的粘性侧边栏。我遇到的问题是，当用户滚动到侧边栏底部并继续滚动更多时，正文开始滚动。

例如在侧边栏等特定元素内滚动时，是否可以防止主体滚动？我试过在侧边栏上使用 overscroll-behaviour: none 并且有效，但不幸的是不适用于 safari 和 ios。有没有更好的办法？我希望它的工作方式与 YouTube 的侧边栏相同，如果您的光标位于侧边栏上，无论侧边栏的滚动位置如何，它都不会滚动正文。

HTML：

<div class="container">
  <aside>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam reprehenderit reiciendis ullam fugiat quo id est aperiam quia sit temporibus nesciunt nemo facilis tempora, cupiditate quam numquam repudiandae, velit repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum est dolorem ratione neque culpa tempora ipsam quidem reprehenderit numquam error? Perspiciatis culpa voluptates vero sequi eligendi tempore esse obcaecati sit! Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores nisi quis facilis nulla vel optio aliquam consequuntur sapiente aliquid modi fugit perspiciatis repellendus molestiae in, reiciendis incidunt eaque ex! Nostrum?</aside>
  <main>content</main>
</div>

CSS：

.container {
  display: grid;
  grid-template-columns: 250px 1000px;
  gap: 20px;
}

aside {
  background: red;
  align-self: start;
  height: 200px;
  overflow-y: auto;
  position: sticky;
  top: 0;
}

main {
  background: blue;
  height: 5000px;
}