From 349346bcf886de9af4fb3bb6b503a46fcb7dca09 Mon Sep 17 00:00:00 2001
From: lizhooh <960316408@qq.com>
Date: Fri, 8 Jun 2018 11:39:26 +0800
Subject: [PATCH] update: beautify the scroll bar

---
 .../src/renderer/index.css                    | 23 +++++++++++++++++++
 .../Playground/DocExplorer/ColumnDoc.tsx      |  2 +-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/graphql-playground-electron/src/renderer/index.css b/packages/graphql-playground-electron/src/renderer/index.css
index f9688c766..fd1b5802a 100644
--- a/packages/graphql-playground-electron/src/renderer/index.css
+++ b/packages/graphql-playground-electron/src/renderer/index.css
@@ -1,3 +1,26 @@
 body {
     overflow: hidden;
+}
+
+*::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 7px;
+    height: 7px;
+}
+*::-webkit-scrollbar-track-piece {
+    background-color: rgba(255, 255, 255, 0);
+}
+*::-webkit-scrollbar-track {
+    background-color: inherit;
+}
+*::-webkit-scrollbar-thumb {
+    max-height: 100px;
+    border-radius: 3px;
+    background-color: rgba(1, 1, 1, 0.23);
+}
+*::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(1, 1, 1, 0.35);
+}
+*::-webkit-scrollbar-thumb:active {
+    background-color: rgba(1, 1, 1, 0.48);
 }
\ No newline at end of file
diff --git a/packages/graphql-playground-react/src/components/Playground/DocExplorer/ColumnDoc.tsx b/packages/graphql-playground-react/src/components/Playground/DocExplorer/ColumnDoc.tsx
index 7715d1f28..2918fd0bb 100644
--- a/packages/graphql-playground-react/src/components/Playground/DocExplorer/ColumnDoc.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/DocExplorer/ColumnDoc.tsx
@@ -26,7 +26,7 @@ const ColumnDoc = ({
         }
         .overflow {
           overflow-x: hidden;
-          overflow-y: scroll;
+          overflow-y: auto;
         }
       `}</style>
       {children}