请教一下老师，如何让自定义滚动条不占据容器的宽度
来源：10-7 动画实战（1）
有没有没被占用的昵称
2023-07-03
老师，我们的项目中使用了自定义的滚动条，但是这样的话右侧就会为滚动条预留出一定的宽度
比如说ant-design-vue的table组件，我们全局定义了滚动条的样式。这样就会出现head和body对不齐的情况。
我查了下，overflow: overlay似乎可以解决，但是没有滚动条的情况下是没问题，有滚动条的情况下其实滚动条还是没有上浮在内容上。
而且通过查询jsmdn，这个值似乎要废弃了，
想请教下老师，如果我想自定义滚动条，又想滚动条是上浮在内容上的，就像绝对定位一样，我应该怎么处理呢。
1回答
-
好帮手慕小李
2025-02-10
如下：
使用伪元素和定位技术：创建一个绝对定位的伪元素，将其放置在容器之上，并设置其尺寸与容器相同。然后，将要溢出的内容放置在该伪元素内，通过设置伪元素的
overflow属性为auto或scroll来控制溢出内容的显示。这样，即使overflow: overlay属性在某些浏览器中不支持，仍然可以使用这种替代方案来实现类似的效果。直接隐藏滚动条：通过
::-webkit-scrollbar { width: 0; }直接隐藏滚动条，这样可以解决破坏布局的问题，但无法模拟移动端的滚动条效果。这种方法简单粗暴，但可能不适合需要滚动条效果的场景。使用第三方库：使用如
react-scrollbars-custom等第三方库来彻底自定义滚动条，这样可以完全控制滚动条的样式和行为，但可能会影响 DOM 结构，兼容性和复杂度也会上升。修改 DOM 结构：在某些情况下，可能需要修改 DOM 结构来模拟
overflow: overlay的效果，例如在 ScrollView 容器下使用绝对定位的滚动条容器实现滚动效果，但这可能会影响 DOM 层级关系。使用
scrollbar-gutter属性：scrollbar-gutter属性可以为滚动条预留空间，从而避免滚动条出现时影响布局。这个属性在四大浏览器中均已得到支持，可以作为overflow: overlay的替代方案。
综上所述，虽然
overflow: overlay已被废弃，但仍有多种方法可以实现自定义滚动条上浮在内容上的效果。开发者可以根据具体需求和场景选择合适的方法。00
相似问题