diff --git a/src/components/base/GrowScroll/index.js b/src/components/base/GrowScroll/index.js index 0c4523ec..afc28f5e 100644 --- a/src/components/base/GrowScroll/index.js +++ b/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 { 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) } diff --git a/src/components/base/GrowScroll/stories.js b/src/components/base/GrowScroll/stories.js index f921a736..e8e9c9aa 100644 --- a/src/components/base/GrowScroll/stories.js +++ b/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', () => ( - - - {[...Array(1000).keys()].map(v =>
{v}
)} -
-
-)) +stories.add('basic', () => { + const reverseColor = boolean('reverseColor', false) + + return ( + + + {[...Array(1000).keys()].map(v =>
{v}
)} +
+
+ ) +}) diff --git a/src/styles/global.js b/src/styles/global.js index 929a570b..4cf30cd2 100644 --- a/src/styles/global.js +++ b/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; - } `