React如何为y轴隐藏滚动条



我有两个滚动条。一个是x轴,一个是y轴。我想隐藏y轴滚动条(但我仍然想要的功能)。我试着

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

但是在这种情况下,我失去了y轴滚动条的功能。然后我试了

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

但是我同时隐藏了x轴和y轴:D是否有一种方法可以隐藏y轴滚动条,但同时具有两个功能。顺便说一句,我使用的是样式组件。

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;
}
`

我找到答案了

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;
}

最新更新