隐藏滚动条但它仍然可以滚动

Question

这是我的代码：

<HStack width={"full"} overflowX={"auto"}>
   <Button>1</Button>
   <Button>2</Button>
   <Button>3</Button>
   <Button>4</Button>
   <Button>5</Button>
</HStack>

我尝试过 overflow={"hidden"} 因为 Htack 是这个 HStack 的父级，但没有任何反应

Answer 1

这样试试

.scrolling-section {
  background-color: #eee;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow: scroll; // Add the ability to scroll y axis
}

// Hide scrollbar for Chrome, Safari and Opera
.scrolling-section::-webkit-scrollbar {
    display: none;
}

// Hide scrollbar for IE, Edge and Firefox
.scrolling-section {
  -ms-overflow-style: none;  // IE and Edge
  scrollbar-width: none;  // Firefox
}

然后把这个className给你的部门

隐藏滚动条但它仍然可以滚动

Hide the scroll bar but it still can scroll

html

css

reactjs

next.js

chakra-ui