滚动条滚动过快时，会留下边框线
但其实大部分时候是这样的，没有多出边框线的
滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行为有关。这种问题可能出现在使用了自定义滚动条样式的情况下。
注意：使用方法 6 好使，其它只是做记录
1. 使用CSS的::-webkit-scrollbar伪元素
如果你使用的是WebKit浏览器（如Chrome, Safari等），可以通过CSS的::-webkit-scrollbar伪元素来定义滚动条的样式。确保在定义滚动条样式时包括了足够的宽度或高度，这样滚动时就不会因为样式缺失而留下边框线。
|
1 2 3 4 |
::-webkit-scrollbar { width: 12px; height: 12px; } |
验证了 width 设置更大值管用，但我的 width 不能改，这个放弃
2. 确保滚动容器有适当的overflow属性
|
1 2 3 4 5 |
.scroll-container { overflow-y: auto; /* 仅在必要时显示垂直滚动条 */ overflow-x: hidden; /* 隐藏水平滚动条 */ max-height: 200px; /* 设置最大高度以触发滚动 */ } |
验证不管用。
3. 使用JavaScript动态调整滚动条宽度
没有必要增加负担
4. 使用CSS的scroll-behavior属性
如果你希望改善用户的滚动体验，可以使用scroll-behavior属性使滚动更加平滑：
|
1 2 3 |
.scroll-container { scroll-behavior: smooth; } |
验证不管用。
5. 使用CSS的 transform 属性
对于动画和滚动效果，可以使用transform和opacity等属性，这些属性可以触发GPU加速。
|
1 2 3 |
.element { transform: translateZ(0); } |
验证好用。但是有一个问题就是 父元素使用transform会使子元素和伪元素的z-index失效
所以子元素里用 dialog 会出问题。
解决办法：可以将 dialog 单独拿出来别放在 transform 的子元素里。
