CSS 样式未应用于元素的溢出部分

Question

当用户使用 JavaScript 水平滚动 window 时，我需要对元素应用一些样式。该元素比 window 宽。稍后添加样式时，它们仅应用于您在水平滚动之前可以看到的部分以查看溢出 window.

的其余部分

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

要允许容器扩展到超过其初始设置的大小，您可以使用 table-layout。 https://www.w3.org/TR/CSS2/tables.html#auto-table-layout

... the table's width is given by the width of its columns ...

在这种情况下，您使用 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/

CSS 样式未应用于元素的溢出部分

CSS styles not applied to overflowing part of element

javascript

css

overflow