// @flow import * as React from 'react'; import { observable } from 'mobx'; import { observer } from 'mobx-react'; import styled from 'styled-components'; type Props = { shadow?: boolean, }; @observer class Scrollable extends React.Component { @observable shadow: boolean = false; handleScroll = (ev: SyntheticMouseEvent<*>) => { this.shadow = !!(this.props.shadow && ev.currentTarget.scrollTop > 0); }; render() { const { shadow, ...rest } = this.props; return ( ); } } const Wrapper = styled.div` height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: none; -webkit-overflow-scrolling: touch; box-shadow: ${props => props.shadow ? '0 1px inset rgba(0,0,0,.1)' : 'none'}; transition: all 250ms ease-in-out; `; export default Scrollable;