溢出滾動沒有隱藏它溢出的內容

我想創建一個'滑塊'，其中用戶能夠水平滾動導航到某些'滑塊項目'。我試圖用純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

溢出滾動沒有隱藏它溢出的內容

回答

相關問題