Edge customize scrollbar

Question

Is there a way with pure css to customize Edge scrollbar like remove the arrows and color make it thinner? I have tried using scrollbar thin or color but no luck. Can anyone help me ?

Answer 1

This is a solution for customization. You can format this as an example:

body::-webkit-scrollbar {
    width: 1em;
}
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

You can find help here: https://css-tricks.com/the-current-state-of-styling-scrollbars/

Answer 2

Pure CSS is not going to work for Edge scrollbar. As according to: https://caniuse.com/#feat=css-scrollbar

This hopefully will change, when Edge will use chromium engine (17ht January 2020).

You need to use JS for styling for now.

Answer 3

You can try below code to implement what your requirement is.

You can

• colour it
• make it thin or thick
• change colour or make it thin or thick on hover

as per your need

.list {
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 150px;
}
.list::-webkit-scrollbar {
  width: 0.5em;
}
.list::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
.list::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}
.list::-webkit-scrollbar:hover {
  width: 0.7em;
}

<div class="list">
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
the quick brown fox jumps over little lazy dog.<br>
</div>

Answer 4

Is there a way with pure css to customize Edge scrollbar like remove the arrows and color make it thinner? I have tried using scrollbar thin or color but no luck. Can anyone help me ?

As far as I know, currently Microsoft Edge doesn't support customize the scrollbar as you said. You could feedback this problem on Microsoft Edge Community Forum, like these links:

Increasing Scroll-Bar Width in Windows 10 Edge

How to change the Microsoft Edge scrollbar color.

Besides, as a temporary workaround, you could try to search some jquery custom scrollbar plugin, such as SimpleBar and Custom Scrollbar Plugins.