コンテナ内の表示要素を選択するにはどうすればいいですか？

Question

div.wrapperがあり、小さなフレーズliのリストulがその中にあります。

divは、width:600pxおよびheight:20pxであり、overflow:hiddenである。

divの可視フレーズのみを選択し、それらにクラスを追加したいとします。

どうすればよいですか？

.wrapper { 
 
    background: #eee none repeat scroll 0 0; 
 
    border: 1px solid #ddd; 
 
    height: 20px; 
 
    overflow: hidden; 
 
    padding: 5px; 
 
    width: 600px; 
 
    float: left; 
 
} 
 
ul { 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
ul li { 
 
    float: left; 
 
    padding: 0 5px; 
 
    list-style-type: none; 
 
}

<div class="wrapper"> 
 
    <ul> 
 
    <li><a>Vocabulary Bowl.</a> 
 
    </li> 
 
    <li><a>Bowl.</a> 
 
    </li> 
 
    <li><a>Today's Leaders.</a> 
 
    </li> 
 
    <li><a>Weekly LeadersToday's.</a> 
 
    </li> 
 
    <li><a>Bowl.</a> 
 
    </li> 
 
    <li><a>Monthly Leaders.</a> 
 
    </li> 
 
    <li><a>Bowl.</a> 
 
    </li> 
 
    <li><a>Vocabulary Bowl Today's Leaders.</a> 
 
    </li> 
 
    <li><a>Bowl Leaders.</a> 
 
    </li> 
 
    <li><a>Today's Leaders Today's Leaders Today's Leaders.</a> 
 
    </li> 
 
    <li><a>Weekly Leaders.</a> 
 
    </li> 
 
    <li><a>Monthly.</a> 
 
    </li> 
 
    <li><a>Vocabulary Bowl.</a> 
 
    </li> 
 
    <li><a>Bowl Leaders.</a> 
 
    </li> 
 
    <li><a>Today's Leaders.</a> 
 
    </li> 
 
    <li><a>Weekly Leaders.</a> 
 
    </li> 
 
    <li><a>Monthly Leaders.</a> 
 
    </li> 
 
    <li><a>Vocabulary Bowl.</a> 
 
    </li> 
 
    <li><a>Bowl Leaders.</a> 
 
    </li> 
 
    <li><a>Today's Leaders.</a> 
 
    </li> 
 
    <li><a>Weekly Leaders.</a> 
 
    </li> 
 
    <li><a>Monthly Leaders.</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

各子矩形（boundingClientRect）とラッパーの矩形を比較できます。

https://jsfiddle.net/wbramLm4/2/

var wrapper = document.querySelector('.wrapper'), 
    wrapperBox = wrapper.getBoundingClientRect(); 

    // the elements that are at least partially visible: top left corner fits in the wrapper 
    var inBoxPartial = $("li").filter(function(idx, li){ 
    var liBox = li.getBoundingClientRect(); 
    return liBox.top < wrapperBox.bottom && liBox.left < wrapperBox.right; 
    }); 

    // the elements that are completely visible: bottom right corner in the wrapper  
    var inBoxTotal = $("li").filter(function(idx, li){ 
    var liBox = li.getBoundingClientRect(); 
    return liBox.bottom < wrapperBox.bottom && liBox.right < wrapperBox.right; 
    }); 
    console.log(inBoxPartial, inBoxTotal); 

Answer 2

あなたはliがビューポートに表示されているかどうかを確認する必要があります。

function isElementInViewport(el) { 
    var rect = el.getBoundingClientRect(); 

    return rect.bottom > 0 && 
     rect.right > 0 && 
     rect.left < (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */ && 
     rect.top < (window.innerHeight || document.documentElement.clientHeight) /* or $(window).height() */; 
} 

$("li").forEach(li => { 
    if(isElementInViewport(li) { 
    //li is visible in the viewport 
    }) 
}) 

Answer 3

私はそれをすることによってフレーズとクラス=「ラッパー」の幅の合計幅を比較し判断します。 そして私はこれらのコードをjQueryで記述します。

$(document).ready(function(){ 
    var len=0; 
    $("li").each(function(e){ 
     len+=$(this).width(); 
     if(len>$(".wrapper").width()) 
      $(this).addClass("hide"); 
    }) 
})