問題如下：

自定義封裝的組件，在裡面修改了全局的滾動條。然而在三方集成的時候，發現滾動條完全被改變了。

請問這個問題怎樣解決？

// ============滾動條樣式============
// 寬度、高度
::-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>

導致新問題出現

如果按網友提出的解決方案，哪麼在系統的很多地方將重復定義滾動條，有沒有更好的解決辦法？