@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:#00000080;
  --scroller-guide-to-color:#0000;
}.v-scroller{
  position:relative;
}

.v-scroller__container{
  -webkit-overflow-scrolling:touch;
  width:100%;
  overflow:auto;
}

.v-scroller__guide{
  z-index:1;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s;
  position:absolute;
}

.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{
  width:var(--scroller-guide-size);
  top:0;
  bottom:0;
}

.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;
}