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

package.json

@@ -36,6 +36,7 @@
     "react-dnd": "^2.0.2",
     "react-dnd-html5-backend": "^2.0.0",
     "react-dom": "^0.14.2",
+    "react-gemini-scrollbar": "^2.0.1",
     "react-loader": "^1.4.0",
     "sanitize-html": "^1.0.0"
   },

src/controllers/organisms/RoomList.js

@@ -18,6 +18,7 @@ limitations under the License.
 
 var React = require("react");
 var ReactDOM = require("react-dom");
+
 var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg");
 var RoomListSorter = require("matrix-react-sdk/lib/RoomListSorter");
 var dis = require("matrix-react-sdk/lib/dispatcher");
@@ -194,7 +195,7 @@ module.exports = {
     _repositionTooltip: function(e) {
         if (this.tooltip && this.tooltip.parentElement) {
             var scroll = ReactDOM.findDOMNode(this);
-            this.tooltip.style.top = (scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - scroll.scrollTop) + "px"; 
+            this.tooltip.style.top = (scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - scroll.children[2].scrollTop) + "px"; 
         }
     },
 };

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>
         );
     }
 });