溢出滚动没有隐藏它溢出的内容

我想创建一个'滑块'，其中用户能够水平滚动导航到某些'滑块项目'。我试图用纯CSS来创建它，但是;我似乎无法让它正常工作。溢出滚动没有隐藏它溢出的内容

开始：

结束：

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

我该如何做到这一点，甚至有可能用纯CSS来实现？

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

来源

2016-01-18 Enzio

可以添加代码 –

只是为了确认：你想一个解决方案，其中没有一个无序列表的内容是容器的外部是可见的，但你可以滚动容器内的列表中的每个元素？你想要滚动条是什么元素？ –

请检查它的先生@EnzioPixel –

试试这个（调整特定值/单元，适合）：

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>

来源

2016-01-18 11:11:33

但是，不解决结束位置。 –

感谢代码示例，但实际上结束位置不正确，左侧的溢出隐藏。我希望所有的溢出都是可见的，但是像'overflow：scroll'一样。 – Enzio

嗯，冒着跳到JavaScript的风险太快，并接受溢出的东西不会为你工作，这个swiper演示：http://www.idangero.us/swiper/demos/13-scrollbar。 html非常接近。你有没有看到你在野外的模式 - 也许尝试和逆向工程呢？ –

请试试这个：

HTML

<div id="project-slider"> 
    <div class="container"> 
     <ul class="items-holder"> 
     <li class="item" style="background: blue;"></li> 
     <li class="item" style="background: red;"></li> 
     <li class="item" style="background: green;"></li> 
     </div> 
    </div> 
</div> 

<div> 
    <p> 
    Just to show that currently the window is scrolling instead of the container. 
    </p> 
</div>

CSS

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; 
}

DEMO HERE

来源

2016-01-18 11:30:00

感谢您的评论。请阅读我对卡尔评论的回复。 – Enzio

的想法是设定一个固定的元素的背景，并把名单在它上面。

Jsfiddle Example

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>

来源

2016-01-18 18:12:30 Stickers

溢出滚动没有隐藏它溢出的内容

回答

相关问题