3

It looks like you can use the IE-specific scrollbar styles like: scrollbar-face-color, scrollbar-track-color, etc. through IE 11, but not with Edge. Is there an alternative for Edge?

Jim O'Neil
  • 23,344
  • 7
  • 42
  • 67

2 Answers2

1

It's hard to know specifically, without official documentation, clear indications, or official word from the dev team, but it seems unlikely based on previous comments about the purpose and design goals of Edge.

Here's why I say that:

The properties you're referring to were originally added to IE8 as extensions to the CSS 2.1 specification. These properties are non-standard and considered illegal in some circles. (There are other non-standard variations, though it's unclear whether they're supported in MS Edge.)

What is clear is that these particular properties may not be formally supported in Edge, presumably because they are proprietary extensions.

This seems unlikely to change, since one of the major design points of MS Edge is to set aside legacy compatibility in favor of standards and cross platform interoperability. (And, given that major functionality changes were made to IE11 without changing the major or minor version number, it's entirely feasible that support for non-standard properties may disappear after any given update.)

The fact that these properties work in the build you're using may be a deliberate design decision or it may be a side effect from the fact that Edge is based on a fork of the Trident engine, one where many lines of legacy code have been removed.

Again, without official confirmation or announcement, this is all speculation based on experience and previous team behavior. Your mileage may vary.

Hope this helps...

-- Lance

Community
  • 1
  • 1
Lance Leonard
  • 3,285
  • 3
  • 16
  • 15
  • Well, until there's a final build, it's hard to say whether that's happy coincidence, a deliberate nod to cross-browser functionality, or a simple mistake. Remember, Edge is based on a fork of the IE Trident engine. Lots of old code has been ripped out...but not all of it. Absent a formal specification outlining scrollbar styling features, I doubt we'll see an effective, cross-browser solution any time soon. – Lance Leonard Jul 22 '15 at 23:08
  • Unless engineering practices have changed in the last year, there are changes to the code base until the official launch. The documentation and other supporting materials are not released until the formal RTW (release to world) date. If press accounts are accurate, that's the 29th. Believe me, things can and will change right up until the last moment. I wouldn't expect material changes to these features. Documentation, however, can be found at https://msdn.microsoft.com/en-us/library/ms531157(v=vs.85).aspx and https://msdn.microsoft.com/en-us/library/ff520854(v=vs.85).aspx – Lance Leonard Jul 23 '15 at 15:43
  • If you would like support in a future version of Edge for this feature (or something like this), please consider voting for it here: https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/9081910-add-support-for-scrollbar-styling. – Sampson Jul 29 '15 at 21:18
  • If you're truly looking for indications about the future of these and other proprietary vendor-prefixed properties, I believe there are clearer indicators than build numbers or other release milestone markers. Consider, for example, [this tweet](https://twitter.com/JustRogDigiTec/status/622105392919678976) from one of the engineering team members. I find other tweets in his feed relevant to these interests; YMMV. Cheers. – Lance Leonard Jul 30 '15 at 17:21
  • I'm not suggesting Microsoft Edge will *restore* the legacy implementation, but if enough interest is shown in styling the scrollbars, we may be able to dialogue within a standards body to determine the feasibility and usefulness of such a feature. – Sampson Jul 30 '15 at 22:32
  • I've attempted to clarify the answer in an attempt to fill in the gaps. – Lance Leonard Jul 31 '15 at 17:59
0

You can do the following:

/* Works on Chrome, Edge, and Safari */

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

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

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

For more info: https://www.digitalocean.com/community/tutorials/css-scrollbars

8r4a5n7d2o7m4
  • 51
  • 6