disable scrollbar

Author: MrWangJustToDo

package.json

@@ -34,6 +34,7 @@
     "prettier": "^3.2.4",
     "project-tool": "https://github.com/MrWangJustToDo/project-tool.git",
     "rollup-plugin-postcss": "^4.0.2",
+    "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss": "^3.4.1",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.2",

packages/react/package.json

@@ -68,6 +68,7 @@
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.33",
     "react": "^18.0.0",
+    "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss": "^3.4.1"
   },
   "peerDependencies": {

packages/react/src/components/DiffSplitViewNormal.tsx

@@ -72,7 +72,7 @@ export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) =
   return (
     <div className="split-diff-view split-diff-view-wrap w-full flex basis-[50%]">
       <div
-        className="old-diff-table-wrapper overflow-auto w-full"
+        className="old-diff-table-wrapper overflow-auto w-full scrollbar-hide scrollbar-disable"
         ref={ref1}
         style={{
           overscrollBehaviorX: "none",
@@ -84,7 +84,7 @@ export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) =
       </div>
       <div className="diff-split-line w-[1.5px] bg-[#ccc]" />
       <div
-        className="new-diff-table-wrapper overflow-auto w-full"
+        className="new-diff-table-wrapper overflow-auto w-full scrollbar-hide scrollbar-disable"
         ref={ref2}
         style={{
           overscrollBehaviorX: "none",

packages/react/src/components/DiffUnifiedView.tsx

@@ -60,7 +60,7 @@ export const DiffUnifiedView = memo(({ diffFile }: { diffFile: DiffFile }) => {
     <DiffWidgetContext.Provider value={contextValue}>
       <div className="unified-diff-view w-full">
         <div
-          className="unified-diff-table-wrapper overflow-auto w-full"
+          className="unified-diff-table-wrapper overflow-auto w-full scrollbar-hide scrollbar-disable"
           style={{ fontFamily: "Menlo, Consolas, monospace", fontSize: "var(--diff-font-size--)" }}
         >
           <table className="unified-diff-table border-collapse w-full">

packages/react/src/tailwind.css

@@ -21,6 +21,17 @@
   --diff-hunk-content-color--: #777777;
 }
 
+/* For Webkit-based browsers (Chrome, Safari and Opera) */
+.scrollbar-disable::-webkit-scrollbar {
+  display: none;
+}
+
+/* For IE, Edge and Firefox */
+.scrollbar-disable {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
 .diff-style-root tr {
   content-visibility: auto;
 }

packages/react/tailwind.config.js

@@ -4,5 +4,5 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [require("tailwind-scrollbar-hide")],
 };

packages/vue/package.json

@@ -58,6 +58,7 @@
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.33",
+    "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss": "^3.4.1",
     "vite": "^5.0.12",
     "vite-plugin-dts": "^3.7.1",

packages/vue/src/components/DiffSplitViewNormal.tsx

@@ -113,7 +113,7 @@ export const DiffSplitViewNormal = defineComponent(
       return (
         <div class="split-diff-view split-diff-view-wrap w-full flex basis-[50%]">
           <div
-            class="old-diff-table-wrapper overflow-auto w-full"
+            class="old-diff-table-wrapper overflow-auto w-full scrollbar-hide"
             ref={ref1}
             style={{
               overscrollBehaviorX: "none",
@@ -125,7 +125,7 @@ export const DiffSplitViewNormal = defineComponent(
           </div>
           <div class="diff-split-line w-[1.5px] bg-[#ccc]" />
           <div
-            class="new-diff-table-wrapper overflow-auto w-full"
+            class="new-diff-table-wrapper overflow-auto w-full scrollbar-hide"
             ref={ref2}
             style={{
               overscrollBehaviorX: "none",

packages/vue/src/components/DiffUnifiedView.tsx

@@ -25,7 +25,7 @@ export const DiffUnifiedView = ({ diffFile }: { diffFile: DiffFile }) => {
   return (
     <div class="unified-diff-view w-full">
       <div
-        class="unified-diff-table-wrapper overflow-auto w-full"
+        class="unified-diff-table-wrapper overflow-auto w-full scrollbar-hide"
         style={{ fontFamily: "Menlo, Consolas, monospace", fontSize: "var(--diff-font-size--)" }}
       >
         <table class="unified-diff-table border-collapse w-full">

packages/vue/tailwind.config.js

@@ -4,5 +4,5 @@ export default {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [require("tailwind-scrollbar-hide")],
 };