卡卡网

本文介绍纯CSS自定义滚动条的跨浏览器演示。

它在 Chrome、Safari 和 Firefox 中相当一致。

效果图

demodownload

实例介绍

纯CSS自定义滚动条，它是跨浏览器的，它在 Chrome、Safari 和 Firefox 中表现一致。

HTML代码

<p>演示内容</p>
<p>演示内容</p>
<p>演示内容</p>

本实例介绍自定义滚动条跨浏览器演示，与HTML代码无太多关系，只需网页内容超过1个屏幕的高度，就能看到滚动条的出现。

CSS代码

CSS代码并不多，主要是使用了3个滚动条属性：scrollbar、scrollbar-track、scrollbar-thumb。

body::-webkit-scrollbar {
  width: 11px;
}
body::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}

JavaScript

本实例是纯CSS实现，无需JavaScript编程。

关于 macOS 上的 Firefox 的注意事项

scrollbar-width属性无论如何都会起作用，但只有当你在“常规系统偏好设置”中选中“显示滚动条：始终”时，scrollbar-color属性才起作用。

总结

本文介绍了纯CSS自定义滚动条的跨浏览器演示，它并且用不到JavaScript编程。

相关文章

• 在 Edge, IE 10/11 中隐藏滚动条
• [3个示例]默认隐藏滚动条，鼠标悬停时显示
• [15个实例]CSS自定义滚动条的样式：圆角/平角/宽度/颜色等
• 如何用CSS自定义滚动条宽度及轨道背景颜色
• 4个纯CSS自定义的炫酷醒目的滚动条
• 6个纯CSS自定义的简单而优雅的滚动条样式

标签: css  滚动条  scrollbar