React 如何隐藏 y 轴的滚动条

Question

我有 2 个滚动条。一个用于 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;
}

`

Answer 1

好的，我找到了答案

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

React 如何隐藏 y 轴的滚动条

React How to hide scrollbar for just y axis

html

css

scrollbar

reactjs