如何防止子元素不可滚动时父元素滚动？

本文将介绍如何在使用 CSS 属性 overscroll-behavior 时，解决当子元素内容不足以滚动时，父元素仍然发生滚动的问题。该问题通常出现在希望限制父元素滚动行为，但子元素内容较少，无法触发自身滚动的情况下。核心思路是强制子元素产生滚动条，以便 overscroll-behavior 属性能够正常生效，从而避免父元素滚动。

理解 overscroll-behavior

overscroll-behavior 属性用于控制当滚动到达元素的边界时发生的情况。它可以防止滚动链的传递，避免浏览器默认行为，例如页面刷新或导航。常用的值包括：

• auto：默认值，允许滚动链传递。
• contain：阻止滚动链传递到父元素，但允许元素内部的滚动。
• none：阻止滚动链传递到父元素和浏览器。

在本文的场景中，我们希望使用 overscroll-behavior: contain 来阻止子元素滚动到达边界时，父元素发生滚动。

问题分析

当子元素的内容高度小于其设定的高度时，子元素本身无法滚动。此时，如果用户尝试在子元素上滚动，滚动事件会传递到父元素，导致父元素滚动，这与我们使用 overscroll-behavior 的初衷相悖。

立即进入“豆包AI人工智官网入口”；

立即学习“豆包AI人工智能在线问答入口”；

解决方案

为了解决这个问题，我们需要确保即使子元素内容较少，也能触发滚动行为。一种巧妙的方法是利用一个不可见的 <span> 元素，并设置其 max-height 属性，从而强制子元素产生滚动条。

步骤 1：修改 CSS

首先，在子元素的 CSS 中，添加或修改以下属性：

.child {
max-height: 5em; /* 根据实际需求调整 */
width: 5em;
margin: 1em;
background-color: lightgrey;
overflow-y: scroll;
overscroll-behavior-y: contain;
}
.parent {
max-height: 8em; /* 根据实际需求调整 */
overflow-y: scroll;
border: solid;
}
span {
display: block;
max-height: 3.5px; /* 关键：设置一个很小的高度 */
}

步骤 2：修改 HTML

在内容较少的子元素中，添加一个 <span> 元素，并确保该 <span> 元素在子元素的底部：

<div class="parent">
If you try to scroll the first box, the outer box should never be scrolled. But if you try to scroll the second box, the outer box is scrolled, which is undesired.
<div class="child">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10
</div>
<div class="child">
1<br>2<br>3<br>
<span> </span>
</div>
</div>

原理分析

• <span> 元素的 display: block 属性使其占据一行空间。
• max-height: 3.5px 属性限制了 <span> 元素的高度，即使内容为空，也会强制子元素产生滚动条。
• 由于子元素现在可以滚动，overscroll-behavior-y: contain 属性可以正常工作，阻止滚动事件传递到父元素。

注意事项

• max-height 的值需要根据实际情况进行调整。确保该值足够小，以便强制产生滚动条，但又不会影响子元素的正常显示。
• 使用   （不换行空格）确保 <span> 元素即使在没有内容的情况下也能占据空间。
• 这种方法适用于内容动态变化的情况。如果子元素的内容是固定的，可以考虑其他更简单的解决方案。

总结

通过巧妙地利用 <span> 元素和 max-height 属性，我们可以有效地解决 overscroll-behavior 在子元素内容不足时失效的问题，从而确保父元素不会意外滚动，提升用户体验。该方法简单易懂，易于实现，适用于各种需要限制滚动行为的场景。