Vue Component Development Kit

# Scroll Container

API

The Scroll Container-component has a dedicated API documentation.

# Installation

npm install @vue-cdk/scroll-container --save

# Usage

@vue-cdk/scroll-container exposes a Vue plugin that you can use like this:

import Vue from 'vue'
import ScrollContainer from '@vue-cdk/scroll-container'

Vue.use(ScrollContainer)

This will globally register a popover component called CScrollContainer.

# Examples

Row #1
Row #2
Row #3
Row #4
Row #5
Row #6
Row #7
Row #8
Row #9
Row #10
Row #11
Row #12
Row #13
Row #14
Row #15
Row #16
Row #17
Row #18
Row #19
Row #20
Row #21
Row #22
Row #23
Row #24
Row #25
Row #26
Row #27
Row #28
Row #29
Row #30
Row #31
Row #32
Row #33
Row #34
Row #35
Row #36
Row #37
Row #38
Row #39
Row #40
Row #41
Row #42
Row #43
Row #44
Row #45
Row #46
Row #47
Row #48
Row #49
Row #50
Row #51
Row #52
Row #53
Row #54
Row #55
Row #56
Row #57
Row #58
Row #59
Row #60
Row #61
Row #62
Row #63
Row #64
Row #65
Row #66
Row #67
Row #68
Row #69
Row #70
Row #71
Row #72
Row #73
Row #74
Row #75
Row #76
Row #77
Row #78
Row #79
Row #80
Row #81
Row #82
Row #83
Row #84
Row #85
Row #86
Row #87
Row #88
Row #89
Row #90
Row #91
Row #92
Row #93
Row #94
Row #95
Row #96
Row #97
Row #98
Row #99
Row #100
Show Code
 
<template>
  <div>
    <label>Scroll Position: <input v-model.number="scrollPosition" /></label>
    <CScrollContainer v-model="scrollPosition" style="border: 1px solid black; height: 300px">
      <div v-for="row in 100" :key="String(row)" :style="styleFor(row)">Row #{{ row }}</div>
    </CScrollContainer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollPosition: 0,
    }
  },
  methods: {
    styleFor(row) {
      return {
        color: 'white',
        padding: '10px',
        backgroundColor: `hsla(${(255 / 100) * row}, 50%, 50%, 1)`,
      }
    },
  },
}
</script>

# API

Playground