Fix #2

Author: Akryum

README.md

@@ -205,6 +205,14 @@ If you set `contentTag` to `'table'`, the actual result in the DOM will look lik
 </div>
 ```
 
+## Customizing the classes
+
+You can use the following props to customize the container and content elements CSS classes:
+
+- `containerClass`
+- `contentClass`
+
+
 ## Slots
 
 There are 4 slots you can use to inject things inside the scroller (it may be usefull to add a `thead` or `tbody`):

dist/vue-virtual-scroller.js

@@ -1,7 +1,7 @@
 {
   "name": "vue-virtual-scroller",
   "description": "Smooth scrolling for any amount of data",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "author": {
     "name": "Guillaume Chau",
     "email": "[email protected]"

package.json

@@ -1,9 +1,9 @@
 <template>
   <component :is="mainTag" class="virtual-scroller" :class="cssClass" @scroll="updateVisibleItems" v-observe-visibility="handleVisibilityChange">
     <slot name="before-container"></slot>
-    <component :is="containerTag" class="item-container" :style="itemContainerStyle">
+    <component :is="containerTag" class="item-container" :class="containerClass" :style="itemContainerStyle">
       <slot name="before-content"></slot>
-      <component :is="contentTag" class="items" :style="itemsStyle">
+      <component :is="contentTag" class="items" :class="contentClass" :style="itemsStyle">
         <template v-if="renderers">
           <component class="item" v-for="(item, index) in visibleItems" :key="keysEnabled && item[keyField]" :is="renderers[item[typeField]]" :item="item" :item-index="_startIndex + index"></component>
         </template>
@@ -61,10 +61,16 @@ export default {
       type: String,
       default: 'div',
     },
+    containerClass: {
+      default: null,
+    },
     contentTag: {
       type: String,
       default: 'div',
     },
+    contentClass: {
+      default: null,
+    },
     pageMode: {
       type: Boolean,
       default: false,