React How to hide scrollbar for just y axis-CodePudding

I have 2 scrollbars. One for x-axis one for y-axis. I want to hide y-axis scrollbar(but i still want the functionalty). I tried

overflow-y:hidden;
overflow-x:scroll;

but in that case i lose the functionalty of y-axis scrollbar. Then i tried

overflow-x:scroll;
overflow-y:scroll;
*{
-ms-overflow-style: none;
}
::-webkit-scrollbar {
display: none;
}

But i hide both x and y axis together :D is there a way to just hide y-axis scrollbar but have both functionalty. btw I am using styled component.

import styled from "@emotion/styled";

export const MainViewContainer = styled.div`
${p=> p.isSidebarOpen? 'width: 80%' : 'width: 95%'};
padding: 30px 50px 10px 50px ;
text-align;
overflow-x:scroll;
overflow-y:scroll;
*{
-ms-overflow-style: none;
}
::-webkit-scrollbar {
display: none;
}

`

CodePudding user response：

Ok I found the answer

 overflow: auto;
::-webkit-scrollbar {
width: 0px;
border: 1px solid #fff;
}

::-webkit-scrollbar-track {
border-radius: 0;
background: #eeeeee;
}

::-webkit-scrollbar-thumb {
 border-radius: 0;
 background: #b0b0b0;
}

CodePudding user response：

can you use below css code : overflow-y : hidden;