Reduce code duplication, add touch scrolling behaviour for webkit browsers

on scrollable areas

app/assets/javascripts/components/components/status_list.jsx

@@ -47,7 +47,7 @@ const StatusList = React.createClass({
     const { statusIds, onScrollToBottom, trackScroll } = this.props;
 
     const scrollableArea = (
-      <div style={{ overflowY: 'scroll', flex: '1 1 auto', overflowX: 'hidden' }} className='scrollable' onScroll={this.handleScroll}>
+      <div className='scrollable' onScroll={this.handleScroll}>
         <div>
           {statusIds.map((statusId) => {
             return <StatusContainer key={statusId} id={statusId} now={this.state.now} />;

app/assets/javascripts/components/features/followers/index.jsx

@@ -39,7 +39,7 @@ const Followers = React.createClass({
 
     return (
       <ScrollContainer scrollKey='followers'>
-        <div style={{ overflowY: 'scroll', flex: '1 1 auto', overflowX: 'hidden' }} className='scrollable'>
+        <div className='scrollable'>
           {accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
         </div>
       </ScrollContainer>

app/assets/javascripts/components/features/following/index.jsx

@@ -39,7 +39,7 @@ const Following = React.createClass({
 
     return (
       <ScrollContainer scrollKey='following'>
-        <div style={{ overflowY: 'scroll', flex: '1 1 auto', overflowX: 'hidden' }} className='scrollable'>
+        <div className='scrollable'>
           {accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
         </div>
       </ScrollContainer>

app/assets/javascripts/components/features/reblogs/index.jsx

@@ -48,7 +48,7 @@ const Reblogs = React.createClass({
         <ColumnBackButton />
 
         <ScrollContainer scrollKey='reblogs'>
-          <div style={{ overflowY: 'scroll', flex: '1 1 auto', overflowX: 'hidden' }} className='scrollable'>
+          <div className='scrollable'>
             {accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
           </div>
         </ScrollContainer>

app/assets/javascripts/components/features/status/index.jsx

@@ -114,7 +114,7 @@ const Status = React.createClass({
         <ColumnBackButton />
 
         <ScrollContainer scrollKey='thread'>
-          <div style={{ overflowY: 'scroll', flex: '1 1 auto' }} className='scrollable'>
+          <div className='scrollable'>
             {ancestors}
 
             <DetailedStatus status={status} me={me} onOpenMedia={this.handleOpenMedia} />

app/assets/stylesheets/components.scss

@@ -295,3 +295,10 @@
   background: #2b90d9;
   color: #fff;
 }
+
+.scrollable {
+  overflow-y: scroll;
+  overflow-x: hidden;
+  flex: 1 1 auto;
+  -webkit-overflow-scrolling: touch;
+}