React中如何仅隐藏y轴滚动条并保留滚动功能（使用styled component）

解决方案 #

直接修改你的styled组件代码如下即可实现仅隐藏y轴滚动条，同时保留x、y轴滚动功能，且x轴滚动条正常显示：

import styled from "@emotion/styled";

export const MainViewContainer = styled.div`
  ${p => p.isSidebarOpen ? 'width: 80%' : 'width: 95%'};
  padding: 30px 50px 10px 50px;
  overflow-x: scroll;
  overflow-y: scroll;

  /* 兼容IE/旧版Edge：隐藏滚动条保留滚动功能 */
  -ms-overflow-style: none;
  /* 兼容Firefox：隐藏滚动条，如需要单独保留x轴滚动条可使用嵌套容器方案处理 */
  scrollbar-width: none;

  /* WebKit内核（Chrome、Safari、新版Edge）仅隐藏垂直y轴滚动条 */
  &::-webkit-scrollbar:vertical {
    display: none;
  }

  /* 以下为可选的x轴滚动条自定义样式，不需要可删除 */
  &::-webkit-scrollbar:horizontal {
    height: 8px;
    background: #f1f1f1;
  }
  &::-webkit-scrollbar-thumb:horizontal {
    background: #c1c1c1;
    border-radius: 4px;
  }
`

原方案问题说明 #

• 第一种写法设置overflow-y: hidden会直接禁用y轴的滚动行为，自然失去滚动功能
• 第二种写法全局设置::-webkit-scrollbar {display: none}会隐藏所有元素的所有轴向滚动条，导致x轴滚动条也被隐藏

方案逻辑 #

• 保留overflow-y: scroll配置，保证y轴滚动功能正常
• 利用WebKit滚动条伪类的:vertical限定符，仅匹配y轴滚动条做隐藏处理，x轴滚动条不受影响
• 针对不同浏览器内核做了兼容处理，覆盖绝大多数使用场景

内容的提问来源于stack exchange，提问作者egemenakturk