Overflow scrollbar on some browsers is unappealing

[jess-lowe]

[Kunal9027]

I have already setup the project locally and GitHub page .i want to work on this issue can you please give more information about the issue . like

• which browsers have this issue.
• does it have issue with every scrollbar on website or a specific part of the website . Because when i check scrollbar in my GitHub pages they are looking good to me.

Solution that i think will work :-

• Hiding the Scrollbar While Preserving Scrollability

    .ecosystem-counts {
      overflow-x: auto;
      /* Hide scrollbar for Firefox */
      scrollbar-width: none; 
      -ms-overflow-style: none; /* Internet Explorer 10+ */
    }
    
    .ecosystem-counts::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Opera */
    } 
  

This keeps the horizontal scroll functionality but hides the visible scrollbar.

I don't want to send unnecessary PR before completely fixing the problem

Thank you

[jess-lowe]

Hey @Kunal9027, thanks for picking this up!

From what I can tell, on top of being browser specific, can also be OS specific. For example, on ChromeOS, scrollbars are automatically hidden, and have no background, where on other OS's like Windows and Linux, they're visible by default and have a background.

For this specific case, given the inconsistencies across OS's, I'd be happy if the overflow vertically was removed/hidden, and the background/thumb colour of the horizontal scroll bar was something that would fit better with the website's theme. I believe that can be done with the scrollbar-color property. It might also be nice to give that bottom area between the ecosystems list and the scroll bar a little bit of extra padding.

This issue primarily affects the front page, but I'll keep an eye out for anywhere else.

Thanks for offering to help! Let me know if you have any more questions, or if there is anything that needs better clarification. :)