标签导航：

移动端CSS滚动条隐藏异常：外层div的border-radius属性与overflow:auto冲突如何解决？

移动端css滚动条显示异常及解决方案

在移动端开发中，overflow: auto结合border-radius经常导致滚动条显示异常：第一次滚动后隐藏，第二次却一直显示。本文分析此问题并提供解决方案。

问题代码示例：

<div id="f" style="background:red;height:300px;width:100%;overflow:hidden;border-radius: 10px;">
    <div id="b" style="background:red;height:100%;width:100%;overflow:auto">
      <div id="c" style="background:rgb(188, 193, 194);height:100%;width:300%;">
        长文本内容...
      </div>
    </div>
</div>

问题根源在于外层div #f 的 border-radius 与内层div #b 的 overflow: auto 冲突。 移除 #f 的 border-radius 可以解决问题，但这可能影响页面设计。

解决方案：将 border-radius 应用于内层div #b，并移除 #f 的 overflow: hidden 属性。 修改后的代码如下：

<div id="f" style="background:red;height:300px;width:100%;">
    <div id="b" style="background:red;height:100%;width:100%;overflow:auto; border-radius: 10px;">
      <div id="c" style="background:rgb(188, 193, 194);height:100%;width:300%;">
        长文本内容...
      </div>
    </div>
</div>

这样，border-radius 不会影响滚动条行为，同时保留了圆角效果。 如果 #f 需要隐藏内容，建议使用 display: none 或其他更合适的样式控制，而不是依赖 overflow: hidden。 此方法有效避免了移动端滚动条显示异常。