web component custom scrollbar

packages/components/scrollbar/customScrollbar2.js

@@ -0,0 +1,11 @@
+import React from "react";
+import "./style.css";
+const CustomScrollbars = ({ children, className, ...props }) => {
+  return (
+    <div className="container">
+      <div {...props}>{children}</div>
+    </div>
+  );
+};
+
+export default CustomScrollbars;

packages/components/scrollbar/index.js

@@ -5,7 +5,7 @@ import { useTheme } from "styled-components";
 import { isMobile } from "@docspace/components/utils/device";
 import StyledScrollbar from "./styled-scrollbar";
 import { classNames } from "../utils/classNames";
-import Scrollbar2 from "./customScrollbar";
+import CustomScrollbars from "./customScrollbar2";
 
 const Scrollbar = React.forwardRef((props, ref) => {
   const scrollbarType = {
@@ -122,6 +122,23 @@ const Scrollbar = React.forwardRef((props, ref) => {
   };
   return (
     <>
+      <CustomScrollbars>
+        ================================================================ Lorem
+        ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+        id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+        enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+        aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
+        in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+        officia deserunt mollit anim id est laborum.
+        ================================================================
+      </CustomScrollbars>
       <StyledScrollbar
         renderView={renderView}
         renderThumbVertical={renderNavThumbVertical}

packages/components/scrollbar/style.css

@@ -1,56 +1,30 @@
-.custom-scrollbars__container {
-    background-color: white;
-    display: grid;
-    height: 100%;
+
+  .container {
     width: 300px;
-    grid-template: auto / 1fr 24px;
-    gap: 1rem;
-    overflow: hidden;
+    height: 200px;
+    overflow: scroll;
     position: relative;
   }
-  
-  .custom-scrollbars__content {
-    height: 300px;
-    max-width: 300px;
-    -ms-overflow-style: none;
-    overflow: auto;
-    scrollbar-width: none;
-  }
-  
-  .custom-scrollbars__content::-webkit-scrollbar {
-    display: none;
-  }
-  
-  .custom-scrollbars__scrollbar {
-    display: grid;
-    gap: 1rem;
-    grid-auto-flow: row;
-    grid-template: auto 1fr auto / 1fr;
-    padding: 1rem;
-    place-items: center;
-  }
-  
-  .custom-scrollbars__track-and-thumb {
-    display: block;
-    height: 100%;
-    position: relative;
+  .container::-webkit-scrollbar {
     width: 7px;
+    height: 7px;
   }
-  
-  .custom-scrollbars__track {
-    background-color: #ccc;
-    border-radius: 12px;
-    bottom: 0;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    width: 7px;
+  .container::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 10px;
+}
+
+.container::-webkit-scrollbar-thumb {
+    background: rgb(136, 136, 136);
+    border-radius: 10px;
   }
-  
-  .custom-scrollbars__thumb {
-    border-radius: 12px;
-    background-color: #333;
-    position: absolute;
-    width: 7px;
+
+  .container::-webkit-scrollbar-thumb:hover {
+    background: rgb(100, 100, 100);
+    border-radius: 10px;
   }
-  
+
+  .container::-webkit-scrollbar-thumb:active {
+    background: rgb(68, 68, 68);
+    border-radius: 10px;
+  }