CSS 页面自定义滚动条

CSS自定义滚动条

直接上代码

设置文本自动换行，行内元素数字字母需要设置，块级标签一般会超出自动换行。

div {
   word-wrap: break-word; //设置文本自动换行
   word-break: normal;
}

超出盒子设置滚动条，并且自定义滚动条样式，以下滚动条样式最好都设置。

div {
  height: 400px;
  overflow: auto; /*当内容超过，出现滚动条*/
}
//设置滚动条样式
div ::-webkit-scrollbar {
  /*滚动条整体*/
  width: 10px;
  border-radius: 5px;
}
div ::-webkit-scrollbar-track {
  /*滚动条轨道*/
  background: #999;
  border-radius: 10px;
}
div ::-webkit-scrollbar-thumb {
  /*滚动条里面的滑块*/
  border-radius: 10px;
}
div ::-webkit-scrollbar-thumb:hover {
  /*滚动条鼠标事件，鼠标放上去出现的事件*/
  background: #333;
}
div ::-webkit-scrollbar-corner {
  /*滚动条边角*/
  background: #179a16;
}