Mantine Drawer组件中ScrollArea的双滚动条问题解析

问题现象

在使用Mantine UI库的Drawer组件时，当设置了scrollAreaComponent={ScrollArea.Autosize}属性后，界面会出现两个滚动条：一个是浏览器原生的滚动条，另一个是ScrollArea组件自带的滚动条。这两个滚动条无法协同工作，用户无法通过单一滚动条到达容器底部。

问题分析

通过开发者工具检查元素发现，导致这个问题的根本原因是某个div元素被错误地设置了height: 100vh样式。这种绝对高度设置会与ScrollArea的自动高度计算产生冲突，导致滚动区域的高度计算异常。

解决方案

将问题div的样式从height: 100vh修改为height: 100%即可解决此问题。这个修改使得：

1. 滚动区域的高度能够根据父容器正确计算
2. ScrollArea组件能够正常工作
3. 消除了原生滚动条和组件滚动条之间的冲突

最佳实践建议

在使用Mantine的Drawer与ScrollArea组合时，应注意以下几点：

1. 避免在嵌套容器中使用绝对高度单位(vh)
2. 优先使用相对高度(百分比)来确保布局的灵活性
3. 检查父容器的overflow属性设置
4. 对于复杂布局，建议使用开发者工具逐步检查各层容器的高度计算

技术原理

ScrollArea组件的工作原理是通过创建嵌套的容器和计算内容高度来实现自定义滚动。当外部容器被固定高度(如100vh)限制时，会破坏这种计算机制，导致滚动区域无法正确判断内容高度，从而触发浏览器原生滚动条的出现。

通过改用相对高度(100%)，ScrollArea能够基于父容器的实际可用空间进行正确的高度计算，从而避免双滚动条的问题。