@dialpad/dialtone-css/lib/build/less/components/scroller.less

Dialpad's design system

.vue-recycle-scroller{
  position:relative
}

.vue-recycle-scroller.direction-vertical:not(.page-mode){
  overflow-y:auto
}

.vue-recycle-scroller.direction-horizontal:not(.page-mode){
  overflow-x:auto
}

.vue-recycle-scroller.direction-horizontal{
  display:flex
}

.vue-recycle-scroller__slot{
  flex:auto 0 0
}

.vue-recycle-scroller__item-wrapper{
  position:relative;
  flex:1;
  box-sizing:border-box;
  overflow:hidden
}

.vue-recycle-scroller.ready .vue-recycle-scroller__item-view{
  position:absolute;
  top:0;
  left:0;
  will-change:transform
}

.vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper{
  width:100%
}

.vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper{
  height:100%
}

.vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view{
  width:100%
}

.vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller__item-view{
  height:100%
}