From e6e424c8a2c39f2fecf2639adb39d1ce9d840037 Mon Sep 17 00:00:00 2001
From: Zeke Zhang <958414905@qq.com>
Date: Wed, 7 Aug 2024 17:29:07 +0800
Subject: [PATCH] feat: use the default style for the scrollbar in mobile

---
 packages/core/client/src/global.less | 75 ++++++++++++++++------------
 1 file changed, 43 insertions(+), 32 deletions(-)

diff --git a/packages/core/client/src/global.less b/packages/core/client/src/global.less
index 0d59a4cc3f..4b93bb91a7 100644
--- a/packages/core/client/src/global.less
+++ b/packages/core/client/src/global.less
@@ -1,35 +1,46 @@
-/* width */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+// the custom style for desktop
+@media (min-width: 768px) {
+  /* width */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: var(--colorBgScrollTrack);
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: var(--colorBgScrollBar);
+    border-radius: 4px;
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--colorBgScrollBarHover);
+  }
+
+  ::-webkit-scrollbar-thumb:active {
+    background: var(--colorBgScrollBarActive);
+  }
+
+  .rc-virtual-list-scrollbar-thumb {
+    background: var(--colorBgScrollBar) !important;
+  }
+  .rc-virtual-list-scrollbar-thumb:hover {
+    background: var(--colorBgScrollBarHover) !important;
+  }
+  .rc-virtual-list-scrollbar-thumb:active {
+    background: var(--colorBgScrollBarActive) !important;
+  }
 }
 
-/* Track */
-::-webkit-scrollbar-track {
-  background: var(--colorBgScrollTrack);
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: var(--colorBgScrollBar);
-  border-radius: 4px;
-}
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  background: var(--colorBgScrollBarHover);
-}
-
-::-webkit-scrollbar-thumb:active {
-  background: var(--colorBgScrollBarActive);
-}
-
-.rc-virtual-list-scrollbar-thumb {
-  background: var(--colorBgScrollBar) !important;
-}
-.rc-virtual-list-scrollbar-thumb:hover {
-  background: var(--colorBgScrollBarHover) !important;
-}
-.rc-virtual-list-scrollbar-thumb:active {
-  background: var(--colorBgScrollBarActive) !important;
+// the custom style for mobile
+@media (max-width: 767px) {
+  // ensure smooth scrolling on iOS devices
+  .smooth-scroll {
+    -webkit-overflow-scrolling: touch;
+  }
 }