javascript - 使用 CSS 或 JS 在溢出的 div 中标记最后一个可见的 child

Question

我有一个带有 inline-block div 的栏。其中一些不在视口(viewport)内，因为我设置了:white-space:nowrap; overflow: hidden; 对于容器。我正在寻找选择最后一个可见 child 的方法。我所说的可见是指 div 放置(最好是完全放置)在它的容器区域。

据我所知，在 CSS 和 jQuery 中都没有这样的选择器。最接近的是 jQuery 的 :visible 但它说所有的 div 都是可见的，因为它们占用页面布局中的空间。

我看到的唯一出路是在加载和每次调整大小时枚举 div，以便通过对它的宽度、填充和边距求和来计算 div 是否仍在容器中。

你有更好的想法吗？

#container {
  white-space:nowrap;
  overflow: hidden;
}

.element {
  display: inline-block;
  vertical-align:top;
}

<div id="container">
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
</div>

在代码段上堆栈溢出的当前非响应版本中，我们可以看到 4 个完整的 div 和第 5 个的一小部分。我想选择第 5 个(或者最好选择第 4 个 div，因为下一个不完全可见)。

Answer 1

您可以使用媒体查询。当然，这可能会变得非常麻烦，具体取决于您拥有的子元素的数量，但它确实节省了使用 onresize 事件监听器的开销。

对于下面的代码片段，我假设父元素占满了屏幕的整个宽度。

*{box-sizing:border-box;margin:0;padding:0;}
#container{
  font-size:0;
  overflow:hidden;
  white-space:nowrap;
}
.element{
  display:inline-block;
  opacity:.5;
  padding:5px;
  vertical-align:top;
  width:150px;
}
img{
  width:100%;
}
@media (max-width:299px){
  .element:first-child{opacity:1;}
}
@media (min-width:300px) and (max-width:449px){
  .element:nth-child(2){opacity:1;}
}
@media (min-width:450px) and (max-width:599px){
  .element:nth-child(3){opacity:1;}
}
@media (min-width:600px) and (max-width:749px){
  .element:nth-child(4){opacity:1;}
}
@media (min-width:750px) and (max-width:899px){
  .element:nth-child(5){opacity:1;}
}
@media (min-width:900px) and (max-width:1049px){
  .element:nth-child(6){opacity:1;}
}
@media (min-width:1050px) and (max-width:1199px){
  .element:nth-child(7){opacity:1;}
}
@media (min-width:1200px){
  .element:nth-child(8){opacity:1;}
}

<div id="container">
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
  <div class="element">
    <img src="http://placehold.it/150x150" alt=""/>
  </div>
</div>