use gemini-scrollbar to provide fake scrollbars for the room list

src/skins/vector/css/gemini-scrollbar.css

@@ -0,0 +1 @@
+../../../../node_modules/react-gemini-scrollbar/node_modules/gemini-scrollbar/gemini-scrollbar.css

src/skins/vector/css/organisms/LeftPanel.css

@@ -38,16 +38,17 @@ limitations under the License.
     
 }
 
-.mx_LeftPanel .mx_RoomList {
+.mx_LeftPanel .mx_RoomList_scrollbar {
     -webkit-box-ordinal-group: 1;
     -moz-box-ordinal-group: 1;
     -ms-flex-order: 1;
     -webkit-order: 1;
     order: 1;
 
-    overflow-y: auto;
     -webkit-flex: 1 1 0;
     flex: 1 1 0;
+
+    overflow-y: auto; 
 }
 
 .mx_LeftPanel .mx_BottomLeftMenu {

src/skins/vector/views/organisms/RoomList.js

@@ -20,6 +20,7 @@ var React = require('react');
 var sdk = require('matrix-react-sdk')
 var dis = require('matrix-react-sdk/lib/dispatcher');
 
+var GeminiScrollbar = require('react-gemini-scrollbar');
 var RoomListController = require('../../../../controllers/organisms/RoomList')
 
 module.exports = React.createClass({
@@ -41,7 +42,8 @@ module.exports = React.createClass({
         var self = this;
 
         return (
-            <div className="mx_RoomList" onScroll={self._repositionTooltip}>
+            <GeminiScrollbar className="mx_RoomList_scrollbar" autoshow={true} onScroll={self._repositionTooltip}>
+            <div className="mx_RoomList">
                 { expandButton }
 
                 <RoomSubList list={ self.state.lists['m.invite'] }
@@ -107,6 +109,7 @@ module.exports = React.createClass({
                              selectedRoom={ self.props.selectedRoom }
                              collapsed={ self.props.collapsed } />
             </div>
+            </GeminiScrollbar>
         );
     }
 });