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，它将隐藏水平滚动条，但保持垂直滚动条。

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

1 个答案: