标签：滚动条 color --- 240 background webkit overflow

给侧边导航栏增加滚动条，elememt的滚动条好像不太好用，所以就使用CSS 的overflow来实现，overflow属性给父元素增加

HTML

 CSS

/*滚动条*/
.scroll {
  height: calc(100vh - 52px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: auto;
}

/* 定义滚动条样式 */
::-webkit-scrollbar {
  width: 5px;
  height: 10px;
  background-color: #195fab;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px #072E97;
  border-radius: 10px;
  background-color: #195fab;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
  background-color: rgba(240, 240, 240, .5);
}

效果呈现，长度超过屏幕，自动显示竖向滚动条

标签：滚动条,color,---,240,background,webkit,overflow
来源： https://www.cnblogs.com/wiliamzhao/p/15355445.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。