Html 滚动条-仅更改单个溢出div的颜色（不更改外部页面滚动）

在经历了大量的尝试之后，我正在寻求帮助

我希望在我的网站上有一个标准的滚动条，但在我的购物车里有一个div，我希望变成一个红色的拇指和标准的背景色

以下是我正在处理的问题：

#弹出购物车。购物车项目{
滚动条颜色：红色；
滚动条宽度：薄；
}
#弹出购物车。购物车项目：-webkit滚动条轨迹{
-webkit盒阴影：插入0 0 6px rgba（0,0,0,0.3）；
背景色：透明；
边界半径：10px；
}
#弹出购物车。购物车项目：-webkit滚动条{
宽度：10px；
背景色：透明；
}
#弹出购物车。购物车项目：-webkit滚动条拇指{
边界半径：10px；
背景色：红色；
}
/*无关CSS*/
.弹出式容器{
宽度：100%；
身高：100%；
}
#弹出式购物车{
宽度：100%；
身高：100%；
显示：无；
位置：固定；
排名：0；
左：0；
z指数：250；
背景色：rgba（0,0,0,0.5）；
文本对齐：左！重要；
}
#弹出式购物车{
显示：块；
}
.弹出购物车部分.购物车内部{
宽度：计算（100%-40px）；
高度：计算（100%-148px）；
最大宽度：640px；
保证金：0自动；
填充：20px；
背景色：白色；
边界半径：10px；
位置：绝对位置；
顶部：钙（50%+34px）；
左：50%；
-ms转换：翻译（-50%，-50%）；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
z指数：151；
}
#外封闭小车{
宽度：100%；
身高：100%；
位置：绝对位置；
}
.关闭购物车{
宽度：50px；
高度：50px；
填充物：5px；
位置：绝对位置；
顶部：-25px；
右：-25px；
z指数：152；
}
.关闭包含img的购物车{
宽度：100%；
}
.弹出购物车部分.内部部分{
身高：100%；
调整项目：灵活启动；
证明内容：中心；
}
#弹出购物车。购物车标题{
宽度：100%；
边缘底部：10px；
垫底：20px；
边框底部：1px纯红；
}
#弹出购物车表单{
宽度：100%；
高度：计算（100%-92px）；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
弯曲方向：立柱；
对齐项目：拉伸；
证明内容：之间的空间；
}
.购物车项目{
高度：计算（100%-142px）；
溢出：滚动；
溢出x：隐藏；
}
#弹出购物车。购物车项目{
宽度：100%；
填充：20px0；
边框底部：1px实心#DADAB；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性包装：包装；
柔性包装：包装；
弯曲方向：行；
对齐项目：居中；
证明内容：之间的空间；
}
#弹出购物车。购物车产品图片{
宽度：150px；
高度：150像素；
背景尺寸：100%自动；
背景重复：无重复；
背景位置：中心；
}
#弹出购物车。购物车产品信息{
宽度：计算（100%-150px）；
填充：0 20px；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性包装：包装；
柔性包装：包装；
弯曲方向：行；
对齐项目：居中；
证明内容：之间的空间；
}
#弹出购物车。购物车产品标题*{
文本对齐：左对齐；
}
#弹出购物车。购物车产品页脚{
z指数：151；
宽度：100%；
边缘顶部：20px；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性包装：包装；
柔性包装：包装；
弯曲方向：行；
对齐项目：居中；
证明内容：之间的空间；
}
#弹出购物车。购物车产品价格，
#弹出购物车。购物车产品变量{
颜色：#585CD3；
保证金：0；
}
#弹出购物车。购物车产品价格乘数{
宽度：60px；
颜色：#585CD3；
填充：10px 20px；
}
输入[type=“number”]{
-webkit外观：textfield；
-moz外观：textfield；
外观：textfield；
}
输入[类型=编号]：-webkit内部旋转按钮，
输入[类型=编号]：-webkit外部旋转按钮{
-webkit外观：无；
}
.数字输入{
边框：1px实心#585CD3；
显示：内联flex；
}
.数字输入按钮{
大纲：无；
-webkit外观：无；
背景色：透明；
边界：无；
对齐项目：居中；
证明内容：中心；
宽度：20px；
光标：指针；
保证金：0；
位置：相对位置；
}
.数字输入按钮：之前，
.数字输入按钮：后{
显示：内联块；
位置：绝对位置；
内容：''；
宽度：10px；
高度：2倍；
背景色：#585CD3；
转换：翻译（-50%，-50%）；
}
.数字输入按钮。加：之后{
变换：平移（-50%，-50%）旋转（90度）；
}
.数字输入[类型=数字]{
文本对齐：居中；
}
/*
#弹出购物车。购物车产品删除{
宽度：40px；
填充物：5px；
左边距：20px；
}
#弹出购物车。购物车删除图标{
宽度：100%；
高度：自动；
}
*/
#弹出购物车。框链接：悬停~*{
文字装饰：无；
}
#弹出购物车.框链接：悬停~*.购物车产品标题{
文字装饰：下划线；
}
#弹出购物车。购物车页脚{
保证金：10px自动0；
填充顶部：20px；
边框顶部：1px纯红；
}
#弹出购物车。购物车小计{
宽度：100%；
边缘底部：20px；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性包装：包装；
柔性包装：包装；
弯曲方向：行；
对齐项目：居中；
证明内容：之间的空间；
颜色：#E20437；
}
#弹出购物车。购物车页脚注释{
宽度：100%；
边缘底部：20px；
文本对齐：左！重要；
文本转换：无；
}
#弹出购物车。购物车操作{
宽度：100%；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性包装：包装；
柔性包装：包装；
弯曲方向：行；
对齐项目：居中；
证明内容：中心；
}
#弹出购物车。购物车视图购物车包含{
填充：10px；
颜色：#585CD3；
背景色：白色；
边框：1px实心#585CD3；
字体大小：16px；
-webkit转换：所有0.7秒；
过渡：所有0.7秒；
}
#弹出窗口-