#68 ScrollBar replaced with native.

package.json

@@ -119,7 +119,6 @@
     "react-hot-loader": "4.13.0",
     "react-redux": "7.2.2",
     "react-router-dom": "5.1.2",
-    "react-smooth-scrollbar": "8.0.6",
     "react-use": "15.3.4",
     "react-window": "^1.8.6",
     "redux-devtools-extension": "2.13.8",

src/components/Header/components/UserStep/Body.jsx

@@ -26,6 +26,7 @@ const Container = styled.div`
 
 const ListContainer = styled(ScrollBar)`
   max-height: 300px;
+  overflow: auto;
 `;
 
 const ListItem = styled(ListItemOrigin)`
@@ -50,13 +51,13 @@ const NotData = styled(({ className }) => (
 `;
 
 const SearchHeader = (
-  <ListSubheader component="div">
+  <ListSubheader component="li" disableSticky>
     Search results
   </ListSubheader>
 );
 
 const TopHeader = (
-  <ListSubheader component="div">
+  <ListSubheader component="li" disableSticky>
     Top users
   </ListSubheader>
 );

src/shared/components/ScrollBar/index.jsx

@@ -1,53 +1,40 @@
 import 'react';
-import Scroll from 'react-smooth-scrollbar';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-// background: ${(props) => props.theme.scrollBackgroundColor};
-
-const ScrollBar = styled(Scroll)`
-  .scrollbar-track {
-    background: transparent;
-    transition: opacity 0.3s;
+export const ScrollBarMixin = css`
+  border-color: rgba(0, 0, 0, 0.0);
+  transition: border-color 0.5s;
+  :hover {
+    border-color: rgba(0, 0, 0, 0.2);
   }
-  &:hover .scrollbar-track {
-    opacity: 1;
+
+  ::-webkit-scrollbar-thumb,
+  ::-webkit-scrollbar-corner {
+    /* add border to act as background-color */
+    border-right-style: inset;
+    /* sum viewport dimensions to guarantee border will fill scrollbar */
+    border-right-width: calc(100vw + 100vh);
+    /* inherit border-color to inherit transitions */
+    border-color: inherit;
   }
 
-  .scrollbar-track-x {
-    height: 8px;
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
   }
-  .scrollbar-track-y {
-    width: 8px;
+  ::-webkit-scrollbar-thumb {
+    border-radius: 8px;
   }
-
-  .scrollbar-thumb {
-    // TODO background scrollBackgroundColor
+  ::-webkit-scrollbar-thumb:hover {
+    border-color: rgba(0, 0, 0, 0.3);
   }
-
-  .scrollbar-thumb-x {
-    height: 4px;
-    top: 50%;
-    margin-top: -2px;
-
-    transition: height 0.3s, margin-top 0.3s;
-    &:hover,
-    &:active {
-      height: 8px;
-      margin-top: -4px;
-    }
+  ::-webkit-scrollbar-thumb:active {
+    border-color: rgba(0, 0, 0, 0.4);
   }
-  .scrollbar-thumb-y {
-    width: 4px;
-    left: 50%;
-    margin-left: -2px;
+`;
 
-    transition: width 0.3s, margin-left 0.3s;
-    &:hover,
-    &:active {
-      width: 8px;
-      margin-left: -4px;
-    }
-  }
+const ScrollBar = styled.div`
+  ${ScrollBarMixin}
 `;
 
 export default ScrollBar;