H5 技术笔记 滚动条

1、待完成

1. 行滚动条
2. 行和交界处样式
3. 其它浏览器 和 版本
   1. 谷歌和Edge 测了
   2. 版本没测

 2、代码

/* 滚动 */
.xj-scoll {
  overflow: auto !important;
  display: block;
}

/* ​滚动条整体部分 */
.xj-scoll::-webkit-scrollbar {
  /* 滚动条宽度 */
  width: 8px;
  height: 8px;
}

/* 滚动条两端的按钮 */
.xj-scoll::-webkit-scrollbar-button {
  box-sizing: border-box;
  /* 宽度 */
  height: 8px;
  width: 4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.xj-scoll::-webkit-scrollbar-button:start {
  border-top: 0px solid transparent;
  border-bottom: 8px solid #409eff;
}
.xj-scoll::-webkit-scrollbar-button:end {
  border-top: 8px solid #409eff;
  border-bottom: 0px solid transparent;
}

/* ​外层轨道 */
.xj-scoll::-webkit-scrollbar-track {
  /* 圆角 + 阴影 */
  /* -webkit-box-shadow: inset 0 0 5px #e9eff4; */
  border-radius: 0;
  background-color: #e9eff4;
}

/* 内嵌滑块 */
.xj-scoll::-webkit-scrollbar-thumb {
  /* 圆角 */
  border-radius: 10px;
  /* 阴影 + 颜色 */
  -webkit-box-shadow: inset 0 0 5px #409eff;
  /* background-color: #409eff; */
}

/* 内层轨道，滚动条中间部分（除去）待测 */
.xj-scoll::-webkit-scrollbar-track-piece​ {
  background: #fff !important
}

/* ​-webkit-scrollbar-corner 边角 水平方向和垂直方向滚动条交接处 待测  */
.xj-scoll::-webkit-scrollbar-corner {
  background-color: pink;
}


/* ​-webkit-resizer ​定义右下角拖动块的样式 待测 */
.xj-scoll::-webkit-resizer {
  background-color: palegreen;
}

/* 触摸 */
.xj-scoll:hover {
  cursor: pointer;
}
.xj-scoll:hover::-webkit-scrollbar-thumb {
  background-color: #409eff;
}