如何实现滚动条位于带圆角div外部的效果？

问题背景 #

想要实现滚动条在带圆角div外部的视觉效果，尝试嵌套div方案（外层设overflow: scroll，内层放内容并设border-radius）时遇到两个问题：

• 内容从内层div溢出
• 滚动时内层div会随之滚动

解决方案 #

采用三层嵌套结构，通过外层容器的圆角裁剪、内层滚动容器的宽度控制，实现滚动条在圆角区域外部的效果：

1. 外层圆角容器：负责呈现圆角视觉，设置overflow: hidden裁剪超出部分
2. 中间滚动容器：设置overflow-y: scroll实现内容滚动，宽度略大于外层容器以容纳滚动条
3. 内容容器：承载实际内容，宽度与外层容器一致，确保内容在圆角可视区域内

代码示例 #

<div style={{ 
  width: 300, 
  height: 100, 
  borderRadius: 30, 
  overflow: 'hidden',
  position: 'relative'
}}>
  <div style={{ 
    width: 'calc(100% + 17px)', // 预留webkit默认滚动条宽度
    height: '100%',
    overflowY: 'scroll'
  }}>
    <div style={{ 
      width: 300, 
      backgroundColor: 'lightgray'
    }}>
      abcdefghijklmnopqrstuvwxyz<br />
      abcdefghijklmnopqrstuvwxyz<br />
      abcdefghijklmnopqrstuvwxyz<br />
      abcdefghijklmnopqrstuvwxyz<br />
      abcdefghijklmnopqrstuvwxyz<br />
      abcdefghijklmnopqrstuvwxyz<br />
      abcdefghijklmnopqrstuvwxyz<br />
    </div>
  </div>
</div>

关键说明 #

• 外层容器的overflow: hidden会裁剪滚动容器超出圆角的部分，同时让滚动条显示在圆角区域外部
• 滚动容器通过calc(100% + 17px)预留滚动条位置（17px为webkit默认滚动条宽度，其他浏览器可按需调整，也可用padding-right: 17px替代宽度增加）
• 内容容器宽度与外层一致，避免内容溢出圆角区域
• 滚动时仅内容容器内的内容滚动，外层圆角容器保持固定，解决了原方案内层div随滚动移动的问题

可选：自定义滚动条样式 #

若需统一不同浏览器的滚动条外观，可添加以下CSS：

::-webkit-scrollbar {
  width: 17px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 8px;
  border: 6px solid transparent;
  background-clip: content-box;
}

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