html - 水平滚动一个绝对定位的元素？

Question

下面的代码有什么问题？所需的行为是让 #library 元素跨越“屏幕”底部并水平滚动。

#library {
 position: absolute;
 bottom: 0; left: 0; right: 0;
 height: 60px;
 overflow-x: scroll;
 overflow-y: hidden;
}

body { overflow: hidden; }

.item {
 display: inline-block;
 width: 50px; height: 50px;
 margin: 5px;
 border: 1px solid gray;
}

<div id="library">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 1

.item 元素在到达 #library 的末尾时换行。由于 overflow-y: hidden，您看不到多行包装元素。将 white-space: nowrap; 添加到 #library 以防止元素换行。

#library {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  overflow: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

body {
  overflow: hidden;
}

.item {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 1px solid gray;
}

<div id="library">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>