如何让指定子元素不触发父div的滚动行为？

当然可以实现这个需求，核心思路是让目标子元素的溢出内容不被父容器的滚动范围计算在内，以下是几种可行的方法：

方法1：绝对定位脱离文档流 #

将不想触发父滚动的子元素设置为绝对定位，同时给父容器添加相对定位作为定位参考。这样子元素会脱离父容器的文档流，父容器的高度计算不会包含它，自然不会因为它的高度溢出而产生滚动。

<div style="height:200px; overflow-y:scroll; position:relative; border:1px solid #ccc;">
  <!-- 其他会触发父滚动的内容 -->
  <div style="height:300px; background:#eee; margin-bottom:10px;">这部分内容会让父容器滚动</div>
  
  <!-- 目标子元素：不会触发父滚动 -->
  <div style="height:900px; background:#ddd; position:absolute; top:0; left:0; width:100%;">
    这个子元素的高度不会影响父容器的滚动范围
  </div>
</div>

注意：这种方法下，绝对定位的子元素会覆盖父容器内的其他内容，如果需要避免覆盖，可以调整定位的top值或者给其他内容添加足够的外边距。

方法2：使用CSS contain 属性 #

利用CSS的contain: layout size属性，让目标子元素的布局和尺寸独立于父容器，父容器计算滚动范围时会忽略该子元素的溢出部分。这种方法不需要脱离文档流，更适合需要子元素保持在文档流中的场景。

<div style="height:200px; overflow-y:scroll; border:1px solid #ccc;">
  <!-- 其他会触发父滚动的内容 -->
  <div style="height:300px; background:#eee; margin-bottom:10px;">这部分内容会让父容器滚动</div>
  
  <!-- 目标子元素：不会触发父滚动 -->
  <div style="height:900px; background:#ddd; contain: layout size;">
    这个子元素的溢出不会影响父容器的滚动
  </div>
</div>

contain: layout size会让浏览器将该元素视为独立的布局容器，父容器不会因为它的高度溢出而调整自身的滚动范围。

方法3：子元素内部隐藏溢出 #

如果你的需求是让目标子元素自己处理溢出（不显示超出部分），同时父容器只滚动其他内容，可以给目标子元素单独设置overflow:hidden，但要确保父容器的滚动范围由其他内容决定：

<div style="height:200px; overflow-y:scroll; border:1px solid #ccc;">
  <!-- 其他会触发父滚动的内容 -->
  <div style="height:300px; background:#eee; margin-bottom:10px;">这部分内容会让父容器滚动</div>
  
  <!-- 目标子元素：自身隐藏溢出，不影响父滚动 -->
  <div style="height:100px; overflow:hidden; background:#ddd;">
    <div style="height:900px;">这个内部元素的溢出会被自身隐藏，不会让父容器滚动</div>
  </div>
</div>

这种方法需要给目标子元素设置固定高度，让它的溢出内容在自身内部隐藏，而不是撑开父容器。

内容的提问来源于stack exchange，提问作者Brian Hinkle