How to remove scrollbar if user on windows - css

Question

I have a react app and I want to remove the scrollbar if the user on a windows machine, regardless of browser being used. I tried to implement a function to get the user's OS (which works well) and then conditionally render some css using styled components but it does not seem to work (wondering if it is just an issue with my styled component?). Here is a snippet from my app component:
// getOS will pass 'win64' as a string to the OuterContainer if the user is browsing from windows
<OuterContainer os={getOS()}>
<ConnectedRouter history={history}>
<Fragment>
<Header />
<Routes />
<Footer />
</Fragment>
</ConnectedRouter>
</OuterContainer>
export const OuterContainer = styled.div`
position: relative;
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
${({ os }) => os !== 'mac' &&
css`
&::-webkit-scrollbar {
display: none;
}
`
}
`;

Answer 1

In order to remove the scrollbar you can set a css property called overflow with value hidden.
Like this:
overflow: hidden;
Check the documentation about this property: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
To hide the scrollbars, but still be able to keep scrolling, you can use the following code:
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
Webkit browsers, such as Chrome, Safari and Opera, supports the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser's scrollbar. IE and Edge supports the -ms-overflow-style: property, and Firefox supports the scrollbar-width property, which allows us to hide the scrollbar, but keep functionality.
Make sure which browser you are testing it, and if you keep getting error, try to set a fixed height value.

Answer 2

If you want to keep the scrolling functionality and just hide the scrollbar use:
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
width: 0px;
height: 0px;
}