Edge自定义滚动条

Question

使用纯CSS可以自定义Edge滚动条，例如删除箭头并用颜色使其变薄吗？我尝试使用稀薄或彩色滚动条，但没有运气。谁能帮我吗？

Answer 1

这是自定义解决方案。您可以将其格式化为示例：

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

您可以在这里找到帮助：https://css-tricks.com/the-current-state-of-styling-scrollbars/

Answer 2

您可以尝试下面的代码来实现您的要求。

您可以

• 为它上色
• 使其变薄或变厚
• 在悬停时更改颜色或使其变薄或变粗

根据您的需要

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