@fastkit/vue-scroller/dist/vue-scroller.css

A library for controlling the scrolling state of elements and components in Vue applications.

:root{
  --scroller-guide-size:20px;
  --scroller-guide-from-color:rgba(0,0,0,.5);
  --scroller-guide-to-color:transparent;
}
.v-scroller{
  position:relative;
}
.v-scroller__container{
  overflow:auto;
  width:100%;
  -webkit-overflow-scrolling:touch;
}
.v-scroller__guide{
  opacity:0;
  pointer-events:none;
  position:absolute;
  transition:opacity .3s;
  z-index:1;
}
.v-scroller__guide--active{
  opacity:.25;
}
.v-scroller__guide--bottom,.v-scroller__guide--top{
  height:var(--scroller-guide-size);
  left:0;
  right:0;
}
.v-scroller__guide--left,.v-scroller__guide--right{
  bottom:0;
  top:0;
  width:var(--scroller-guide-size);
}
.v-scroller__guide--top{
  background:linear-gradient(
      to bottom,
      var(--scroller-guide-from-color),
      var(--scroller-guide-to-color));
  top:0;
}
.v-scroller__guide--right{
  background:linear-gradient(
      to left,
      var(--scroller-guide-from-color),
      var(--scroller-guide-to-color));
  right:0;
}
.v-scroller__guide--bottom{
  background:linear-gradient(
      to top,
      var(--scroller-guide-from-color),
      var(--scroller-guide-to-color));
  bottom:0;
}
.v-scroller__guide--left{
  background:linear-gradient(
      to right,
      var(--scroller-guide-from-color),
      var(--scroller-guide-to-color));
  left:0;
}