溢出滚动，而不隐藏其溢出的内容

Question

我正在尝试创建一个“滑块”，用户可以水平滚动到特定的“滑块项”。然而，我试图用纯css来创建它；但是，我似乎无法使它正常工作。

Start:

​

端：

​

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

我如何才能做到这一点，或它甚至有可能实现与纯CSS？

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

Answer 1

正如@Karl提到的那样，我开始使用SwiperJs (演示：https://swiper-demo-13-centered-1j4bnx.stackblitz.io/)，但在那之后，我开始尝试不使用它。有很多窍门，其中有很多是不同的，可以改进。但是，要正确对齐滚动条，必须使用自定义滚动条。其主要思想是在.scroll-container上有一个负的裕度，使用CSS变量来计算元素的空间遍历。

​

:root {
    --WINDOW-X-SPACE: 20px;
    --CONTAINER-X-SPACE: 30px;
}

* {
    box-sizing: border-box;
}
html, body {
    height: 100vh;
}
body {
    background: teal;
    margin: 0;
    padding: 20px var(--WINDOW-X-SPACE);
    overflow-x: hidden;
}
main {
    padding: 10px var(--CONTAINER-X-SPACE);
    background: purple;
}
.scroll-container {
    height: 200px;
    margin: 0 calc(-1 * calc(var(--WINDOW-X-SPACE) + var(--CONTAINER-X-SPACE)));
    padding: 0 var(--WINDOW-X-SPACE);
    display: flex;
    overflow: auto;
}
.scroll-container::-webkit-scrollbar {
    all: unset;
}
 
.scroll-container::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
    margin: 0 var(--WINDOW-X-SPACE);
}
 
.scroll-container::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    background-color: white;
}
.list-wrapper {
    background: orange;
    width: fit-content;
    height: 100%;
    display: flex;
    margin: 0;
    padding: 0;
    padding-top: 40px;
    position: relative;
}
.list-wrapper:before {
    content: "Unordened list";
    display: block;
    position: absolute;
    left: 15px;
    top: 12px;
}
.list-item {
    text-align: center;
    font-size: 18px;
    background: rgba(255, 255, 255, .5);
    border: solid 1px orange;
    width: 100px;
    flex-shrink: 0;
    height: 100%;

    /* Center slide text vertically */
    display: flex;
    justify-content: center;
    align-items: center;
}

.fix-offset {
    width: var(--WINDOW-X-SPACE);
    flex-shrink: 0;
}

<h4>Window</h4>
<main>
    <h4>Container</h4>
    <div class="scroll-container">
        <ul class="list-wrapper">
            <div class="list-item">List item</div>
            <div class="list-item">List item</div>
            <div class="list-item">List item</div>
            <div class="list-item">List item</div>
            <div class="list-item">List item</div>
            <div class="list-item">List item</div>
            <div class="list-item">List item</div>
            <div class="list-item">List item</div>
            <div class="list-item">List item</div>
            <div class="list-item">List item</div>
        </ul>
        <span class="fix-offset"></span>
    </div>
</main>

​

试一试：https://codepen.io/Alynva/full/gOPaGVX

Answer 2

这样做的目的是在一个固定元素上设置背景，并将列表放在上面。

Jsfiddle示例

​

body {
  background: teal;
  margin: 0;
}
.background {
  background: purple;
  width: 80vw;
  height: 80vh;
  position: fixed;
  left: 10vw;
  top: 10vh;
}
.scrollable {
  list-style-type: none;
  position: relative;
  display: flex;
  padding: 0;
  margin: 20vh 0 0 10vw;
  height: 60vh;
}
.scrollable li {
  padding: 10px;
  background: orange;
  height: 100%;
  flex: 0 0 50vw;
  border: 1px solid darkorange;
  box-sizing: border-box;
}

<div class="background"></div>
<ul class="scrollable">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

​

Answer 3

试着这样做(调整特定的值/单位以适应)：

​

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>

​