这是设置元素滚动条样式的一种方法。试试这个：-

.poem {
  overflow: scroll;
  white-space: wrap;
  height: 140px;
  width: 140px;
}

.poem::-webkit-scrollbar{
  width: 5px;
  height: 5px;
}

.poem::-webkit-scrollbar-thumb{
  background-color: red; 
}

.poem::-webkit-scrollbar-track{background-color: orange;}

<p class="poem">abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz
  abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz
  abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz </p>

根据MDN Web Docs：
“：：-webkit-scrollbar仅在基于Blink和WebKit的浏览器中可用”
你可以看到**：：-webkit-scrollbar有很好的浏览器支持：-
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar#browser_compatibility
对于scrollbar-color**，浏览器支持不好：-
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility
希望对大家有帮助。

您所做的一切都是正确的，只是scrollbar-color属性在所有浏览器中都不受支持。基本上只有Firefox支持这个。在Firefox中打开此问题，您的演示按预期工作。
您可以在此页面底部查看浏览器对此属性的支持：https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color

语法是正确的，只是不支持你的浏览器。滚动条颜色：红橙子滚动条宽度：Thin;仅支持Firefox。尝试使用

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}