Getting rid of ugly scrollbars using Overlayscrollbars
Tags: webdev, react, design, howto
Published: 2020-02-21 22:54:37

At [Draftbit](https://draftbit.com/) we were running into an issue where when a user plugged in a mouse into their machine, any scrollable content would render with the default styled macOS scrollbars. 
![MacOS scrollbars when mouse is plugged in](https://dev-to-uploads.s3.amazonaws.com/i/edfsy9kj61rx39n6ljo1.png)
As you can tell, that's not the prettiest look and the scrollbars take up a bit of space in their div. The situation on windows machines wasn't any better as scrollbars are always rendered no matter what.
![Windows scrollbars always rendering oof](https://dev-to-uploads.s3.amazonaws.com/i/l7vmngbztidvd224igtg.png)
The quick and easy solution is to use `css`,
``` css
.scrollBar { //Needed for Mozilla when applying overflow:scroll or auto
  scrollbar-width: none;
}
::-webkit-scrollbar { //Needed for Chrome and Safari
  width: 0px;
}

::-webkit-scrollbar-track-piece {
  background-color: transparent;
  -webkit-border-radius: 6px;
}

```
![No scrollbars rendered](https://dev-to-uploads.s3.amazonaws.com/i/8ekepufdtwfe15a20o2d.png)
This will remove the scrollbars and still allow for scrolling, however it removes the indicator showing the user how far they have scrolled. This causes issues with accessibility and isn't the route we wanted to go.

After discussing possibilities including scroll hijacking we settled on using [OverlayScrollbars](https://kingsora.github.io/OverlayScrollbars/#!overview), a library which hides native scrollbars and replaces them with styleable overlay scrollbars.

To integrate we did the following:
- create a wrapper component, `ScrollContainer`, which uses Overlayscrollbars' `OverlayScrollbarsComponent` 
- apply the appropriate styles to the component, for us the `os-theme-dark` was perfect for the dark theme of our builder.
- apply options to achieve the scrollbar behaviour that we needed, for our needs we wanted the scrollbars to hide when the user was not scrolling so we enable `autohide`
- we then searched the entire app to find where we were using `overflow:auto` or `overflow:scroll`. 
- if found we would replace that `div` with `ScrollConatiner` and apply the proper tailwind classNames.

![OverlayScrollbars, no scrollbars](https://dev-to-uploads.s3.amazonaws.com/i/zy6sy20avog56pk5a4qk.gif)

And **BOOM**,like that, Draftbit was free of those ugly scrollbars and in their place were some sleek scrollbars that work and look good. If you enjoy making apps look good and want to enter the no-code space, [Draftbit](https://draftbit.com/about#jobs) is hiring! Come check out how we're making app-building accessible to everyone!


Example:
``` js
import * as React from "react";
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";

const ScrollContainer = ({ className, children }) => {
  return (
    <OverlayScrollbarsComponent
      className={"os-theme-dark " + className}
      options={{ scrollbars: { autoHide: "scroll" } }}>
      {children}
    </OverlayScrollbarsComponent>
  );
};

export default ScrollContainer;
```

``` js 
import * as React from "react";
import ScrollContainer from "/ScrollContainer"

const PanelThatNeedsToBeScrollable = () => {
  return (
    <ScrollContainer className="p-4 mt-4">
      <div>
        <span className="tallerThanHeightOfScreen"> I'm so tall that my content needs to scroll!!! </span>
      </div>
    </ScrollContainer>
}

```