Edge 113浏览器中scrollbar样式不显示预期效果求助

我参照MDN的滚动条样式文档编写了代码，想要实现**红色滑块（thumb）和橙色轨道（track）**的细（thin）滚动条，但在Edge 113浏览器中看不到预期效果，请帮忙排查代码是否存在错误。

原代码示例 #

.poem {
  overflow: scroll;
  scrollbar-color: red orange;
  scrollbar-width: thin;
  white-space: wrap;
  height: 140px;
  width: 140px;
}

<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>

问题排查与修复 #

• 核心错误：white-space: wrap是无效属性值，正确的强制不换行值应为white-space: nowrap。原错误值会让文本自动换行，容器无法触发横向滚动条；同时纵向文本高度未超出容器高度，也不会出现纵向滚动条，导致自定义滚动条样式无法显示。
• Edge 113本身完全支持scrollbar-color和scrollbar-width属性，只要容器出现滚动条，样式就能正常生效。

修正后的代码 #

.poem {
  overflow: scroll;
  scrollbar-color: red orange;
  scrollbar-width: thin;
  white-space: nowrap; /* 修正此处 */
  height: 140px;
  width: 140px;
}

<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>

内容的提问来源于stack exchange，提问作者samre ray