W3School TIY Editor

<!DOCTYPE html>
<html>
<head>
<style>
#container, #pinkDiv, #yellowDiv {
  margin: 5px 15px;
  padding: 3px;
  border: solid black 1px;
  overflow: auto;
}

#container {
  background-color: rgb(197, 255, 236);
  height: 370px;
}

#container p {
  width: 200%;
}

#leftDiv {
  float: left;
  width: 60%;
}

#pinkDiv, #yellowDiv {
  height: 150px;
  width: 80%;
}

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

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

<h1>尝试黄色盒子在行内方向上没有滚动链</h1>

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

<p><strong>注意：</strong>要在行内方向上触发滚动溢出行为，您可能需要使用触摸板或触摸屏上的滑动手势。</p>

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

<div id="leftDiv">
    <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>
  </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>

<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>