Remove scrollbar dependency

Author: pomber

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",

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

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(() => {