Add gap on GrowScroll

src/components/base/GrowScroll/index.js

@@ -7,47 +7,17 @@ import noop from 'lodash/noop'
 import Box from 'components/base/Box'
 
 type Props = {
-  maxHeight?: number | string,
+  maxHeight?: number,
   children: any,
-  offsetLimit: Object,
   onUpdate: Function,
 }
 
 class GrowScroll extends PureComponent<Props> {
   static defaultProps = {
     onUpdate: noop,
-    offsetLimit: {
-      y: {
-        max: -3,
-        min: 3,
-      },
-    },
   }
 
   componentDidMount() {
-    const { offsetLimit } = this.props
-
-    if (this._scrollbar) {
-      this._scrollbar.addListener(function onScroll({ limit, offset }) {
-        if (limit.y > 0) {
-          const maxY = limit.y + offsetLimit.y.max
-          const minY = offsetLimit.y.min
-
-          if (offset.y > maxY) {
-            this.setPosition(offset.x, maxY, {
-              withoutCallbacks: true,
-            })
-          }
-
-          if (offset.y < minY) {
-            this.setPosition(offset.x, minY, {
-              withoutCallbacks: true,
-            })
-          }
-        }
-      })
-    }
-
     this.handleUpdate(this.props)
   }
 

src/components/base/GrowScroll/stories.js

@@ -1,15 +1,25 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import { boolean } from '@storybook/addon-knobs'
 
 import Box from 'components/base/Box'
 import GrowScroll from 'components/base/GrowScroll'
 
 const stories = storiesOf('GrowScroll', module)
 
-stories.add('basic', () => (
-  <Box style={{ border: '1px solid black' }}>
-    <GrowScroll maxHeight={400}>
-      {[...Array(1000).keys()].map(v => <div key={v}>{v}</div>)}
-    </GrowScroll>
-  </Box>
-))
+stories.add('basic', () => {
+  const reverseColor = boolean('reverseColor', false)
+
+  return (
+    <Box
+      borderWidth={1}
+      borderColor="night"
+      bg={reverseColor ? 'night' : 'white'}
+      color={reverseColor ? 'white' : 'night'}
+    >
+      <GrowScroll maxHeight={400}>
+        {[...Array(1000).keys()].map(v => <div key={v}>{v}</div>)}
+      </GrowScroll>
+    </Box>
+  )
+})

src/styles/global.js

@@ -45,22 +45,13 @@ injectGlobal`
     font-style: italic;
   }
 
-  .scrollbar-thumb-y {
-    width: 5px !important;
-  }
-  .scrollbar-thumb-x {
-    height: 5px !important;
+  .scrollbar-thumb {
+    background: rgba(102, 102, 102, 0.5) !important;
+    padding: 2px;
+    background-clip: content-box !important;
   }
   .scrollbar-track {
     background: transparent !important;
     transition: opacity 0.2s ease-in-out !important;
   }
-  .scrollbar-track-y {
-    right: 2px !important;
-    width: 5px !important;
-  }
-  .scrollbar-track-x {
-    bottom: 2px !important;
-    height: 5px !important;
-  }
 `