Edge浏览器中滚动条样式的支持

Question

看起来你可以在IE 11及以下版本中使用特定于IE的滚动条样式，例如：scrollbar-face-color、scrollbar-track-color等等。不过，在Edge浏览器中就不行了。有什么替代方案吗？

- Jim O'Neil

Answer 1

没有官方文档, 明确的指示或开发团队的官方消息, 很难具体知道，但基于先前关于Edge目的和设计目标的评论，这似乎是不太可能的。

我这样说的原因如下:

你提到的属性最初是作为扩展添加到CSS 2.1规范中的IE8。这些属性是非标准的，被认为在某些领域是非法的。(还有其他非标准变体，尽管不清楚它们是否得到了MS Edge的支持。)

可以确定的是，这些特定属性可能不会在Edge中得到正式支持，可能是因为它们是专有扩展。

这似乎不太可能改变，因为MS Edge的主要设计重点之一是放弃遗留兼容性，而是支持标准和跨平台互操作性。(鉴于IE11进行了重大功能更改而未更改主版本或次版本号，因此在任何给定的更新后，对非标准属性的支持可能会消失。)

这些属性能够在你正在使用的版本中工作，可能是有意的设计决策，也可能是由于Edge基于Trident引擎分支而产生的副作用，其中许多旧代码已被删除。再次强调，没有官方确认或公告，这都是基于经验和以前团队行为的猜测。你的体验可能会有所不同。希望这可以帮到你...--Lance

- Lance Leonard

---

在没有最终版本之前，很难说这是一个愉快的巧合、跨浏览器功能的有意表示，还是一个简单的错误。请记住，Edge基于IE Trident引擎的分支。许多旧代码已被删除...但并非全部。在没有规范明确滚动条样式特性的情况下，我怀疑我们不会很快看到有效的跨浏览器解决方案。 - Lance Leonard

除非工程实践在过去一年中发生了变化，否则在正式发布之前，代码库会有所改变。文档和其他支持材料直到正式的RTW（发布给全世界）日期才会发布。如果新闻报道准确，那就是29日。相信我，事情会一直变化直到最后一刻。我不希望这些功能有实质性的变化。然而，文档可以在https://msdn.microsoft.com/en-us/library/ms531157(v=vs.85).aspx和https://msdn.microsoft.com/en-us/library/ff520854(v=vs.85).aspx找到。 - Lance Leonard

如果您希望在 Edge 的未来版本中支持此功能（或类似功能），请考虑在此处投票：https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/9081910-add-support-for-scrollbar-styling。 - Sampson

如果你真的在寻找关于这些和其他专有供应商前缀属性未来的迹象，我相信有比构建编号或其他发布里程碑标记更清晰的指标。例如，考虑一下工程团队成员的这条推文。我发现他的其他推文与这些兴趣相关；你的想法可能不同。干杯！ - Lance Leonard

我并不是在暗示Microsoft Edge会恢复传统的实现方式，但如果有足够的兴趣来设计滚动条的样式，我们可能能够在标准机构内进行对话，以确定这种功能的可行性和有用性。 - Sampson

我尝试澄清答案以填补空缺。 - Lance Leonard

Answer 2

你可以做以下操作：

/* 适用于 Chrome、Edge 和 Safari 浏览器 */

*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: orange;
}

*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

更多信息请参见：https://www.digitalocean.com/community/tutorials/css-scrollbars

- 8r4a5n7d2o7m4