溢出滚动而不隐藏它的溢出内容

Question

我正在尝试创建一个“滑块”，用户可以在其中水平滚动以导航到某些“滑块项目”。但是，我正在尝试使用纯 css 创建它；我似乎无法让它正常工作。

开始：

结尾：

好吧，让我稍微解释一下图片。“窗口”中的所有内容都是可见的。这也意味着无序列表的溢出。我想要的是让用户能够在容器内水平滚动以移动无序列表。然而; 我不能在“容器”上使用overflow: hidden或overflow: scroll，因为它会隐藏我不想要的所有溢出内容。

我怎样才能做到这一点，或者甚至可以用纯 CSS 来实现？

我当前的代码：https : //jsfiddle.net/f0exzxkw/2/

Answer 1

试试这个（调整具体值/单位以适应）：

html, body {
  margin: 0;
  padding: 0;
  background: #12969D;
}

.container {
  height: 90vh;
  width: 90vw;
  padding: 40px 0;
  box-sizing: border-box;
  border: 1px solid black;
  background: #6B00BE;
  margin: 5vh auto;
}

ul {
  height: 100%;
  width: calc(100% + 75px);
  padding: 0;
  background: #FFBD37;
  list-style-type: none;
  box-sizing: border-box;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space:nowrap;
}

li {
  padding: 10px;
  display: inline-block;
  background: #FFD787;
  height: 100%;
  width: 50vw;
  border: 1px solid black;
}

<div class="container">
  <ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
  </ul>
</div>