feat(scrollbar): max-height

demo/debugComponents/scrollbarDebug/scaffold.demo.vue

@@ -16,7 +16,7 @@
         </n-scrollbar>
       </div>
       <div style="width: 400px; height: 300px;">
-        <n-scrollbar>
+        <n-scrollbar :max-height="200">
           <div style="background: linear-gradient(red, blue); width: 400px; height: 500px;">
             666
           </div>

demo/demo.vue

@@ -135,10 +135,6 @@ export default {
               name: 'Select',
               path: '/n-select'
             },
-            {
-              name: 'Cascader',
-              path: '/n-cascader'
-            },
             {
               name: 'MultipleLabels',
               path: '/n-MultipleLabels'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "description": "",
   "main": "index.js",
   "scripts": {

packages/common/Scrollbar/src/main.vue

@@ -1,6 +1,9 @@
 <template>
   <div
     class="n-scrollbar"
+    :style="maxHeight === null ? {} : {
+      maxHeight: maxHeight + 'px'
+    }"
     @mouseenter="enterScrollWrapper"
     @mouseleave="leaveScrollWrapper"
     @dragstart.capture="handleDragStart"
@@ -8,6 +11,9 @@
     <div
       ref="scrollContainer"
       class="n-scrollbar-container"
+      :style="maxHeight === null ? {} : {
+        maxHeight: maxHeight + 'px'
+      }"
       @scroll="handleScroll"
     >
       <div
@@ -71,6 +77,10 @@ export default {
     duration: {
       type: Number,
       default: 0
+    },
+    maxHeight: {
+      type: Number,
+      default: null
     }
   },
   data () {