CSS樣式不適用於元素的溢出部分

Question

當用戶使用JavaScript水平滾動窗口時，我需要將某些樣式應用於元素。元素比窗口寬。當樣式稍後添加時，它們僅應用於水平滾動之前可以看到的部分，以查看溢出窗口外的其餘部分。

https://codepen.io/sleepydada/pen/RLBqYW

HTML：

<ul> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul> 

CSS：

* { 
    box-sizing: border-box; 
} 
ul { 
    list-style: none; 
    display: flex; 
    border-right: 13px solid yellow; 
    padding:0; 
    li { 
    background:red; 
    flex: 0 0 250px; 
    height: 250px; 
    border: 1px solid black; 
    box-shadow: 0 4px 2px -2px gray; 
    } 
    &.added { 
    border: 10px solid blue; 
    } 
} 

JS：

var ul = document.querySelector('ul') 
window.addEventListener('scroll', function() { 
    ul.classList.add('added') 
}) 

Answer 1

，使容器擴大了它的大小最初設置，你可以使用 表格佈局。 https://www.w3.org/TR/CSS2/tables.html#auto-table-layout

...表格的寬度由它的列的寬度給出...

在這種情況下，你使用flex，不要讓孩子包裹。 display:table + table-cell將具有相同的行爲，但它也將根據需要進行擴展。

var ul = document.querySelector('ul') 
 
window.addEventListener('scroll', function() { 
 
    ul.classList.add('added') 
 
})

* { 
 
    box-sizing: border-box; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    display: table; 
 
    border-right: 13px solid yellow; 
 
    padding: 0; 
 
    height: 250px; 
 
    width: 100%;/* is this needed ? */ 
 
} 
 
ul li { 
 
    background: red; 
 
    display: table-cell; 
 
    min-width: 250px; 
 
    border: 1px solid black; 
 
    box-shadow: 0 4px 2px -2px gray; 
 
} 
 
ul.added { 
 
    border: 10px solid blue; 
 
}

<ul> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

https://codepen.io/gc-nomade/pen/QqBzaZ/