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/