From 113f8e6278020d8d0d09c89d906b27562d0a28ea Mon Sep 17 00:00:00 2001
From: aarush130 <aarush.saxena@amdocs.com>
Date: Tue, 27 Jan 2026 17:10:20 +0530
Subject: [PATCH] fix: hide native scrollbars on mobile devices (iOS)

Fixes #26

- Added overflow: hidden to .scrollbar container to clip native scrollbars
- Added negative margin technique to push native scrollbars outside visible area
- Added display: none and -webkit-appearance: none to ::-webkit-scrollbar

This technique is used by popular libraries like SimpleBar and OverlayScrollbars.
---
 src/components/Scrollable/Scrollable.scss | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/Scrollable/Scrollable.scss b/src/components/Scrollable/Scrollable.scss
index 0a77b55..f50a1d1 100644
--- a/src/components/Scrollable/Scrollable.scss
+++ b/src/components/Scrollable/Scrollable.scss
@@ -1,4 +1,4 @@
-.scrollbar {
+.scrollbar {
   --scrollable-track-thickness: 12px;
   --scrollable-thumb-thickness: Calc(var(--scrollable-track-thickness)/2);
   --scrollable-thumb-offset: 3px;
@@ -7,6 +7,7 @@
   max-height: 100%;
   max-width: 100%;
   display: flex;
+  overflow: hidden; // Hide native scrollbars on mobile by clipping
 
   &:hover > .scrollbar-track .scrollbar-thumb .scrollbar-thumb-inner {
     opacity: 1;
@@ -17,7 +18,7 @@
     position: relative;
     overflow: auto;
     flex: 1;
-    -ms-overflow-style: none;  // IE 10+
+    -ms-overflow-style: none; // IE 10+
     /* stylelint-disable */
     scrollbar-width: none; // Firefox
 
@@ -25,7 +26,16 @@
       width: 0;
       height: 0;
       background: transparent;
+      display: none;
+      -webkit-appearance: none;
     }
+
+    // Hide native scrollbars on mobile devices (iOS) using negative margin technique
+    // This pushes the scrollbar outside the visible area where overflow:hidden clips it
+    margin-right: -20px;
+    padding-right: 20px;
+    margin-bottom: -20px;
+    padding-bottom: 20px;
   }
 
   .scrollbar-track {
@@ -40,7 +50,7 @@
         background-color: rgba(28, 34, 43, 0.6);
         border-radius: 4px;
         opacity: 0;
-        transition: opacity 0.2s ease-out 0.5s; // The transition delay is used to keep the thumb visible for a short time when the cursor leaves. (see `Scrollable.constants.js`)
+        transition: opacity 0.2s ease-out 0.5s;
       }
     }
   }