磨砂玻璃面板&自定义优雅而酷的CSS滚动条

前言

浅聊一下滚动条的世界，一个设计良好的页面与匹配的滚动条是相辅相成的。老式的chrome滚动条样式不太适合。 我们将研究滚动条的细节，然后看看一些很酷的例子。

在线查看案例

滚动条的组件

简单的探讨了CSS中自定义滚动条样式的细节

要设置滚动条的样式，您需要熟悉滚动条的结构。请看下图：

在HTML元素上使用：：-webkit滚动条：：

html::-webkit-scrollbar {
   /* Style away! */ 
} 

html::-webkit-scrollbar-track {
  /* Style away! */ 
}
 
html::-webkit-scrollbar-thumb {
  /* Style away! */
}  

在该元素上使用：：-webkit滚动条：：

.element::-webkit-scrollbar {
   /* Style away! */ 
} 

.element::-webkit-scrollbar-track {
  /* Style away! */ 
}
 
.element::-webkit-scrollbar-thumb {
  /* Style away! */
}  

磨砂玻璃风格面板css代码片段

  background:rgba(255, 255, 255, 0.2); 
  border:1px solid #fffaf5;
  box-shadow: 0px 5px 20px rgba(255, 223, 197, 0.8);
  backdrop-filter: blur(20px);

滚动条样式控制代码片段

/* 自定义滚动条样式css  */
.content-box::-webkit-scrollbar {
  width: 8px;
}
/* 滚动条背景 */
.content-box::-webkit-scrollbar-track {
  background: #ffe4cb; 
  border-radius:8px;
  border:1px solid #ffedde;   
}
/* 滚动条拖动块 */
.content-box::-webkit-scrollbar-thumb {    
  background: linear-gradient( 0deg,#f7be89, #ffbb7c);  
  border:1px solid #ffedde;   
  border-radius:8px;  
}