问题如下：

自定义封装的组件，在里面修改了全局的滚动条。然而在三方集成的时候，发现滚动条完全被改变了。

请问这个问题怎样解决？

// ============滚动条样式============
// 宽度、高度
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
//背景色
::-webkit-scrollbar-track {
background-color: #191c21;
}
// 滑块颜色
::-webkit-scrollbar-thumb {
background-color: #434b55;
}
// 滚动条右下角交叉部分
::-webkit-scrollbar-corner {
background-color: #434b55;
}

有网友提出采用局部滚动条样式定义，即:

1.在需要滚动条的元素上添加类名或ID选中器，后续方便样式定义。

2.然后利用CSS伪类:scrollbar来重新自定义滚动条的外观。

<template>
<div class="custom-scroll">
<!-- 内容 -->
</div>
</template>

<style scoped>
/* 针对特定元素的滚动条样式 */
.custom-scroll::-webkit-scrollbar {
width: 8px; /* 设置滚动条宽度 */
}

.custom-scroll::-webkit-scrollbar-thumb {
background-color: #999; /* 设置滑块颜色 */
border-radius: 4px; /* 设置滑块边角半径 */
}
.custom-scroll::-webkit-scrollbar-track {
background-color: #f5f5f5; /* 设置滚动条背景色 */
}
</style>

导致新问题出现

如果按网友提出的解决方案，哪么在系统的很多地方将重复定义滚动条，有没有更好的解决办法？