悬停显示滚动条

利用CSS mask-image 属性给元素添加遮罩,遮罩黑色部分下的内容会显示,而留白的17像素宽的部分会被遮住,使用transition改变遮罩位置时出现淡入淡出的效果

.content {
  padding: 17px 0 17px 17px;
  width: 300px;
  height: 200px;
  overflow-y: scroll;

  mask-image: linear-gradient(to top, transparent, black),
    linear-gradient(to left, transparent 17px, black 17px);
  mask-size: 100% 20000px;
  mask-position: left bottom;

  -webkit-mask-image: linear-gradient(to top, transparent, black),
    linear-gradient(to left, transparent 17px, black 17px);
  -webkit-mask-size: 100% 20000px;
  -webkit-mask-position: left bottom;
  
  transition: mask-position 0.3s, -webkit-mask-position 0.3s;
}

.content:hover {
  mask-position: left top;
  -webkit-mask-position: left top;
}
<div class="wrapper">
  <div class="content">
    一段很长的内容
  </div>
</div>

参考: Scrollbars on Hover | CSS-Tricks