html - 隐藏垂直滚动条，保持水平且仍能滚动

Question

我正在尝试以一种方式编写 HTML/CSS，我有一个可以垂直和水平滚动的 div，但只有水平滚动条可见。因此，垂直滚动是使用鼠标滚轮完成的，水平滚动是使用底部的滚动条(以及其他常用控件，如键盘等)完成的。通常建议使用 -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它将隐藏水平滚动条，但保留垂直滚动条。