检测可滚动div内的元素何时不在视图中 [英] Detect when elements within a scrollable div are out of view

问题描述

我需要找到一个很好的解决方案来解决以下问题。我看到很多人询问跟踪页面或浏览器窗口中的元素是否位于视图端口之内或之外。我需要能够复制这个动作，但是在一个滚动的DIV中，有溢出：例如滚动。有没有人知道一个很好的例子，为这个具体的行动？

在此先感谢。

解决方案

之前我有同样的问题，我已经结束了以下功能。第一个参数是要检查的元素，第二个是检查元素是否部分inview.it是

 函数checkInView（elem，partial）
 { 
 var container = $（。scrollable）; 
 var contHeight = container.height（）; 
 var contTop = container.scrollTop（）; 
 var contBottom = contTop + contHeight; 
 
 var elemTop = $（elem）.offset（）。top  -  container.offset（）。top; 
 var elemBottom = elemTop + $（elem）.height（）; 
 
 var isTotal =（elemTop> = 0&& elemBottom< = contHeight）; 
 var isPart =（（elemTop< 0& elemBottom> 0）||（elemTop> 0& elemTop< = container.height（）））&&部分; 
 
返回isTotal || isPart; 
} 
  

在 jsFiddle 。

I need to find a good solution to the following problem. I see a lot of people asking about tracking if an element is in or outside of view Port for the page or browser window. I need to be able to replicate this action, but inside a DIV that scrolls, with overflow:scroll for example. Does anyone know of a good example, for this specific action?

Thanks in advance.

解决方案

i had the same problem before, i have ended up with the following function.the first parameter is for the element to check, the second is to check if the element is partially in-view.it is for vertical check only, you can extend it to check for horizontal scroll.

function checkInView(elem,partial)
{
    var container = $(".scrollable");
    var contHeight = container.height();
    var contTop = container.scrollTop();
    var contBottom = contTop + contHeight ;

    var elemTop = $(elem).offset().top - container.offset().top;
    var elemBottom = elemTop + $(elem).height();

    var isTotal = (elemTop >= 0 && elemBottom <=contHeight);
    var isPart = ((elemTop < 0 && elemBottom > 0 ) || (elemTop > 0 && elemTop <= container.height())) && partial ;

    return  isTotal  || isPart ;
}

check it on jsFiddle .

这篇关于检测可滚动div内的元素何时不在视图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！