如何在允许滚动的情况下隐藏反应应用程序中的滚动条

Question

我试图在我的反应应用程序中隐藏滚动条，但无法实现它。我尝试使用 ::-webkit-scrollbarorwidth as 0但display as none无法达到预期的结果。

Answer 1

这适用于所有浏览器。这里的containerdiv 是可滚动的，但滚动条隐藏了您想要实现的目标。

.container {
  height: 200px;
  width: 350px;
  background-color: #3c3c3c;
  overflow-y: auto;
  
  /* hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* hide scrollbar for chrome, safari and opera */
.container::-webkit-scrollbar {
  display: none;
}

.container p {
  color: #fff;
  padding: 20px;
}

<div class="container">
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
  <p>hello</p>
</div>