W3School TIY Editor

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 5px 15px;
  padding: 3px;
  border: solid black 1px;
  overflow: auto;
}

#flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: rgb(197, 255, 236);
  height: 300px;
}

#flex-container > div {
  flex: 1;
  height: 150px;
}

#pinkDiv {
  background-color: rgb(255, 205, 213);
}

#yellowDiv {
  background-color: rgb(255, 255, 161);
  overscroll-behavior: contain;
}
</style>
</head>
<body>

<h1>尝试右侧盒子没有滚动链</h1>

<p>将鼠标指针放在左侧的粉色盒子上，向下滚动到底部，继续滚动，滚动行为将传递到绿色的父元素。这称为滚动链，当一个元素的滚动溢出时会导致父元素的滚动行为。滚动链是默认行为。</p>

<p><b>注意：</b>在向下滚动后，您可能需要将鼠标指针稍微移动一下粉色盒子内部，以将滚动行为传递给绿色的父元素。</p>

<p>现在，再次滚动到顶部，将鼠标指针移到右侧的黄色盒子上，向下滚动到底部，继续滚动，您会看到在这种情况下滚动不会传递到父元素，这是因为 overscroll-behavior 属性的值为 'contain'，阻止了这种情况的发生。</p>

<div id="flex-container">
  <div id="pinkDiv">
    <h2>有滚动链</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat leo eu odio feugiat luctus. Duis vel sagittis ipsum, non dictum nisl. Vivamus sit amet volutpat metus. Nunc tempus, mi ut vehicula porttitor, velit lacus sagittis lorem, sit amet venenatis mauris nibh sit amet urna. Nam nibh mi, commodo id diam eu, congue suscipit nunc. Vestibulum scelerisque dui tempus tincidunt luctus. Donec placerat quis neque vel ultrices. Pellentesque dignissim placerat orci sed cursus. Ut convallis leo sapien, vitae ornare nulla sodales at. Suspendisse ut vestibulum erat. Sed ut fermentum tortor. Integer quis tellus eget nisi pharetra pharetra non vitae magna. Cras ultricies, nulla id imperdiet varius, nisi odio finibus diam, at finibus lacus risus vel dui. Ut euismod consequat libero eu pharetra.</p>
  </div>
  
  <div id="yellowDiv">
    <h2>无滚动链</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat leo eu odio feugiat luctus. Duis vel sagittis ipsum, non dictum nisl. Vivamus sit amet volutpat metus. Nunc tempus, mi ut vehicula porttitor, velit lacus sagittis lorem, sit amet venenatis mauris nibh sit amet urna. Nam nibh mi, commodo id diam eu, congue suscipit nunc. Vestibulum scelerisque dui tempus tincidunt luctus. Donec placerat quis neque vel ultrices. Pellentesque dignissim placerat orci sed cursus. Ut convallis leo sapien, vitae ornare nulla sodales at. Suspendisse ut vestibulum erat. Sed ut fermentum tortor. Integer quis tellus eget nisi pharetra pharetra non vitae magna. Cras ultricies, nulla id imperdiet varius, nisi odio finibus diam, at finibus lacus risus vel dui. Ut euismod consequat libero eu pharetra.</p>
  </div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat leo eu odio feugiat luctus. Duis vel sagittis ipsum, non dictum nisl. Vivamus sit amet volutpat metus. Nunc tempus, mi ut vehicula porttitor, velit lacus sagittis lorem, sit amet venenatis mauris nibh sit amet urna. Nam nibh mi, commodo id diam eu, congue suscipit nunc. Vestibulum scelerisque dui tempus tincidunt luctus. Donec placerat quis neque vel ultrices. Pellentesque dignissim placerat orci sed cursus. Ut convallis leo sapien, vitae ornare nulla sodales at. Suspendisse ut vestibulum erat. Sed ut fermentum tortor. Integer quis tellus eget nisi pharetra pharetra non vitae magna. Cras ultricies, nulla id imperdiet varius, nisi odio finibus diam, at finibus lacus risus vel dui. Ut euismod consequat libero eu pharetra.</p>

</body>
</html>