移动端CSS滚动条隐藏失效：为什么border-radius会影响overflow:hidden的滚动条隐藏？

移动端css滚动条隐藏失效：border-radius与overflow:hidden的冲突详解

在移动端开发中，巧妙地控制滚动条的显示和隐藏，对于提升用户体验至关重要。然而，一些CSS样式的组合却可能导致意想不到的问题，例如滚动条在多次滚动后无法隐藏。本文将深入分析一个典型案例，并提供有效的解决方案。

问题现象：

以下代码片段在移动端浏览器中表现异常：第一次滚动后滚动条隐藏，但第二次滚动后却无法自动隐藏。

<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%;">        111111111111111111111111111111111111111111111111111111111111111111111111111      </div>    </div>  </div>

登录后复制