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

Question

我有一个 inline-block div 的酒吧。其中一些不在视口内，因为我为容器设置了：white-space:nowrap; overflow: hidden;。我正在寻找 select 最后可见 child 的方法。所谓可见，我的意思是 div 被放置（最好是完全放置）在它的容器区域。

据我所知，在CSS和jQuery中都没有select或类似的东西。最接近的是 jQuery 的 :visible，但它表示所有 div 都是可见的，因为它们在页面布局中占用了 space。

我看到的唯一出路是在加载和每次调整大小时枚举 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 个的一小部分。我想要 select 第 5 个（或者最好是第 4 个 div，因为下一个不完全可见）。

Answer 1

我做了一些JQ代码，希望对你有帮助

如果所有元素都具有相同的宽度，则此方法有效。如果它们有不同的宽度，代码将需要一些小的改动

看这里 > JSFIDDLE

JQ 代码：

var vwidth = $(window).width() // get window width
var ewidth = $(".element").width() // get element width
var total = vwidth / ewidth // calculate how many elements fit inside the window width
var integer = parseInt(total)// get the integer from the result above

$(".element").eq( integer - 1 ).addClass("lastvisible")// -1 because eq starts from  0

不同宽度元素的解决方法：

JQ :

var vwidth = $(window).width(); // get screen width
  $(".element").each(function(){

  var eleft = $(this).offset().left // each element's distance from left of the screen 
  var ewidth = $(this).width()// each element's width
  var total = eleft + ewidth 
  if (total < vwidth) {  // if sum between distance from left of screen + element width is smaller than the window screen
        that = $(this); // all elements that are visible inside the screen
  }
  });

that.addClass("lastvisible") //only the last element visible inside the screen

请在此处查看 fiddle > JsFiddle

Answer 2

您可以使用媒体查询。当然，这可能会变得非常麻烦，具体取决于您拥有的子元素的数量，但它确实节省了使用 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>

Answer 3

这是我实现它的方法，但我欢迎任何更好的方法。

一切都由jQuery计算：

var cwidth = parseInt($('#container').width()); // get container width
var lastElement = $('#container .element:first'); // assume that first element is visible
$("#container .element:not(:first)").each(function(){
    //get right offset for every div
    var rightOffset = $(this).offset().left 
        + parseInt($(this).width())
        + parseInt($(this).css('padding-left'))
        + parseInt($(this).css('margin-left'));
    //if the right offset is bigger than container width then stop enumerating - previous one was the last fully visible
    if (rightOffset > cwidth){
        return false; 
    }
    //offset was lower than container with so this is our new fully visible element
    lastElement = $(this);
});

lastElement.addClass("lastvisible")

优点：

适用于不同的元素大小
在 window 调整大小时添加相同的重新计算，您就有了有效的响应方式

缺点：

多次jQuery 重新计算对浏览器来说非常麻烦
在我看来丑陋的代码

https://jsfiddle.net/6k5xujtc/1/

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

Mark last visible child in overflown div using CSS or JS

javascript

css

jquery

jquery-selectors

优点：

缺点：