如果用户在 Windows 上，如何删除滚动条答案

【问题标题】：How to remove scrollbar if user on windows如果用户在 Windows 上，如何删除滚动条
【发布时间】：2021-05-10 08:20:41
【问题描述】：

我有一个 React 应用程序，如果用户在 Windows 机器上，我想删除滚动条，不管使用的是什么浏览器。我尝试实现一个函数来获取用户的操作系统（效果很好），然后使用样式化组件有条件地渲染一些 CSS，但它似乎不起作用（想知道这是否只是我的样式化组件的问题？）。这是我的应用组件中的一个 sn-p：

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

【问题讨论】：

标签： css reactjs styled-components

【解决方案1】：

为了移除滚动条，您可以设置一个名为overflow 的css 属性并隐藏值。像这样：

overflow: hidden;

查看有关此属性的文档：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

要隐藏滚动条，但仍能保持滚动，可以使用以下代码：

/* 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 浏览器，例如 Chrome、Safari 和 Opera，支持非标准的 ::-webkit-scrollbar 伪元素，它允许我们修改浏览器滚动条的外观。 IE 和 Edge 支持-ms-overflow-style: 属性，Firefox 支持scrollbar-width 属性，它允许我们隐藏滚动条，但保留功能。

确定你测试的是哪个浏览器，如果一直报错，尝试设置一个固定的高度值。

【讨论】：

谢谢，但我仍然想要滚动功能。我只是不希望它被看到。

【解决方案2】：

如果您想保留滚动功能并只隐藏滚动条，请使用：

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

【讨论】：