From 5c6ddd8264e9660a293f06afa06e31f43f217af6 Mon Sep 17 00:00:00 2001
From: Rodrigo Pombo <pombopombopombo@gmail.com>
Date: Sun, 24 Feb 2019 18:53:05 -0300
Subject: [PATCH] Remove scrollbar dependency

---
 package.json     |  1 -
 src/scroller.css |  7 +++++++
 src/scroller.js  | 19 ++++++-------------
 3 files changed, 13 insertions(+), 14 deletions(-)
 create mode 100644 src/scroller.css

diff --git a/package.json b/package.json
index 9bd84c7..75b6726 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,6 @@
     "netlify-auth-providers": "^1.0.0-alpha5",
     "prismjs": "^1.15.0",
     "react": "^16.8.1",
-    "react-custom-scrollbars": "^4.2.1",
     "react-dom": "^16.8.1",
     "react-scripts": "2.1.3",
     "react-swipeable": "^4.3.2",
diff --git a/src/scroller.css b/src/scroller.css
new file mode 100644
index 0000000..87ef1c3
--- /dev/null
+++ b/src/scroller.css
@@ -0,0 +1,7 @@
+.scroller::-webkit-scrollbar {
+  background-color: rgba(255, 255, 255, 0.01);
+}
+
+.scroller::-webkit-scrollbar-thumb {
+  background-color: rgb(173, 219, 103, 0.3);
+}
diff --git a/src/scroller.js b/src/scroller.js
index b00ba78..fdd58ee 100644
--- a/src/scroller.js
+++ b/src/scroller.js
@@ -1,7 +1,6 @@
 import React from "react";
-
 import useChildren from "./use-virtual-children";
-import { Scrollbars } from "react-custom-scrollbars";
+import "./scroller.css";
 
 export default function Scroller({
   items,
@@ -24,21 +23,15 @@ export default function Scroller({
   });
 
   React.useLayoutEffect(() => {
-    ref.current.scrollTop(top);
+    ref.current.scrollTop = top;
   }, [top]);
 
   return (
-    <Scrollbars
-      autoHide
+    <div
+      style={{ height: "100%", overflowY: "auto" }}
+      class="scroller"
       ref={ref}
-      // onScrollFrame={({ scrollTop }) => setTop(scrollTop)}
       onScroll={e => setTop(e.target.scrollTop)}
-      renderThumbVertical={({ style, ...props }) => (
-        <div
-          style={{ ...style, backgroundColor: "rgb(173, 219, 103, 0.3)" }}
-          {...props}
-        />
-      )}
       children={children}
     />
   );
@@ -48,7 +41,7 @@ function useHeight(ref) {
   let [height, setHeight] = React.useState(null);
 
   function handleResize() {
-    setHeight(ref.current.getClientHeight());
+    setHeight(ref.current.clientHeight);
   }
 
   React.useEffect(() => {