当tab标签超出滚动时，在侧边增加一个渐变透明的框，会使视觉上更加明显，让用户感知到该处可以滑动

效果对比展示

原本样式：

原本样式

增加渐变的透明框后的样式：

增加渐变的透明框后的样式

滚动后的效果：

滚动后的效果

可滑动的tab标签

1
2
3
4
5
6
7
8
9
/* 超出部分可所有滑动 */
.tab_scroll {
  display: -webkit-box;
  overflow: auto;
}
/* 隐藏滚轮 */
.tab_scroll::-webkit-scrollbar {
  display: none;
}

渐变透明的小方块

1
2
3
4
5
6
7
8
9
10
.tab_scroll:before {
  content: '';
  position: absolute;
  right: 0;
  float: right;
  /* border: 1px solid red; */
  height: 66px;
  width: 60px;
  background: linear-gradient(to right, transparent, white);
}

祝君无Bug~