Re: [PR] fix: Fixed the vertical scroll bar on the home page [apisix-website]

["Copilot (via GitHub)" <gi...@apache.org>]

Copilot commented on code in PR #1864:
URL: https://github.com/apache/apisix-website/pull/1864#discussion_r2807184000


##########
website/src/css/customTheme.scss:
##########
@@ -105,6 +105,10 @@ body {
   overflow-x: hidden !important;
 }
 
+::-webkit-scrollbar {
+  display: none;
+}
+

Review Comment:
   Hiding scrollbars completely can negatively impact accessibility and user experience. Users who rely on visual scrollbar indicators to understand their position on a page may be confused. Additionally, users with motor impairments who cannot use a mouse wheel may have difficulty scrolling without visible scrollbars. Consider whether this is truly necessary, or if the root cause (unwanted overflow) should be addressed instead by fixing the layout that's creating the scrollbar.
   ```suggestion
     width: 8px;
     height: 8px;
   }
   
   ::-webkit-scrollbar-thumb {
     background-color: rgba(0, 0, 0, 0.3);
     border-radius: 4px;
   }
   
   ::-webkit-scrollbar-track {
     background-color: transparent;
   }
   ```



##########
website/src/css/customTheme.scss:
##########
@@ -105,6 +105,10 @@ body {
   overflow-x: hidden !important;
 }
 
+::-webkit-scrollbar {
+  display: none;
+}
+

Review Comment:
   This solution hides the symptom (scrollbar visibility) rather than addressing the root cause (unwanted overflow). The issue description mentions a vertical scrollbar appearing when it shouldn't, which typically indicates that some element on the page is causing overflow. Hiding the scrollbar doesn't prevent scrolling or fix the underlying layout issue. Consider investigating which element is causing the overflow and fixing the layout instead. You can use browser dev tools to identify overflow-causing elements.
   ```suggestion
   
   ```



##########
website/src/css/customTheme.scss:
##########
@@ -105,6 +105,10 @@ body {
   overflow-x: hidden !important;
 }
 
+::-webkit-scrollbar {
+  display: none;
+}

Review Comment:
   The current implementation only hides scrollbars in WebKit-based browsers (Chrome, Safari, Edge). Firefox and older browsers won't be affected by this change. For complete cross-browser support, you should also add the standard CSS property `scrollbar-width: none;` to hide scrollbars in Firefox. Additionally, consider adding `-ms-overflow-style: none;` for older versions of Internet Explorer and Edge.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@apisix.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org