边缘自定义滚动条

时间：2019-12-13 08:56:57

标签： css microsoft-edge

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

4 个答案:

答案 0 :(得分：0)

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

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/

答案 1 :(得分：0)

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

您可以

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

根据您的需要

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

答案 2 :(得分：0)

纯CSS不适用于Edge滚动条。按照https://caniuse.com/#feat=css-scrollbar

当Edge使用铬引擎时（2020年1月17日），这种情况有望改变。

您现在需要使用JS进行样式设计。

答案 3 :(得分：0)

  

是否可以使用纯CSS自定义Edge滚动条（如删除）   箭头和颜色使其更细？我尝试使用滚动条   稀薄或有色，但没有运气。谁能帮我吗？

据我所知，当前Microsoft Edge不支持您所说的自定义滚动条。您可以在Microsoft Edge社区论坛上反馈此问题，例如以下链接：

Increasing Scroll-Bar Width in Windows 10 Edge

How to change the Microsoft Edge scrollbar color。

此外，作为临时的解决方法，您可以尝试搜索一些jquery定制的滚动条插件，例如SimpleBar和Custom Scrollbar Plugins。

相关问题
最新问题