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/

CSS样式不适用于溢出部分元素

1 个答案: