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

wufei123 2025-03-12 阅读:54 评论:0

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

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

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

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

问题代码示例：

PHP

<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 属性。修改后的代码如下：

PHP

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