隐藏垂直滚动条，保持水平并且仍然可以滚动

Question

我正在尝试以一种可以垂直和水平滚动的 div 的方式编写 HTML/CSS，但只有水平滚动条可见。因此，垂直滚动是使用鼠标滚轮完成的，水平滚动是使用底部的滚动条（以及其他常用控件，如键盘等）完成的。通常建议的带有 -webkit-scrollbar display none 的解决方案在这里不适用，因为它只能隐藏两个滚动条，因此是新问题。

所以，基本上，我需要这样的行为，除了水平滚动条应该仍然存在：

.content {
  width:400px;
  height:200px;
}

.container {
  overflow-x: auto;
  overflow-y: auto;
  height: 100px;
  width: 200px;
}

.container::-webkit-scrollbar {
  display: none;
}

<div class="container">
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

Answer 1

你可以使用-webkit-scrollbar，但你需要使用width和height而不是display: none

div {
  width: 100px;
  height: 100px;
  font-size: 48px;
  
  overflow: auto;
}

::-webkit-scrollbar {
  height: 0px;
  width: 8px;
  border: 1px solid #fff;
}

::-webkit-scrollbar-track {
  border-radius: 0;
  background: #eeeeee;
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: #b0b0b0;
}

<div>
Lorem ipsum dolor sit amet.
</div>

Shift scroll to move horizontally

width 只会影响垂直滚动，而height 只会影响水平滚动。如果设置height: 0px，它会隐藏水平滚动条，但保持垂直滚动条。