侧边导航栏滚动条---CSS overflow实现

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

HTML

侧边导航栏滚动条---CSS overflow实现

 

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

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

侧边导航栏滚动条---CSS overflow实现

 

上一篇:Java四种引用包括强引用,软引用,弱引用,虚引用。


下一篇:关于样式-单行/多行文本隐藏+省略