如何使用JavaScript检测元素重叠（覆盖）？ [英] How to detect elements overlapping (overlaying) using JavaScript?

问题描述

如何使用JavaScript检测重叠的HTML元素？

我有一个项目列表（< ul> ）。它使用JavaScript上下滑动。当它向下滑动时，取决于项目的数量，它可以与另一个元素（< div> ）重叠，这是此时的绝对位置（可以改变） 。

当< ul> 与< div> ; 将新样式应用到< div> 以临时隐藏或向下移动一点，以防止重叠？ br>

这里你可以看到，我在说什么： http://timetable.raj.fvds.ru/

非常感谢！

解决方案

  function isObjOnObj（a，b）{
 var al = a.left; 
 var ar = a.left + a.width; 
 var bl = b.left; 
 var br = b.left + b.width; 
 
 var at = a.top; 
 var ab = a.top + a.height; 
 var bt = b.top; 
 var bb = b.top + b.height; 
 
 if（bl> ar || br< al）{return false;} //重叠不可能
 if（bt> ab || bb< at）{return false;} / / overlap不可能
 
 if（bl> al&& bl< ar）{return true;} 
 if（br> al& br< ar）{return true ;} 
 
 if（bt> at&& bt< ab）{return true;} 
 if（bb> at&& bb< ab）{return true;} 
 
 return false; 
} 
  

How to detect overlap HTML elements, using JavaScript?

I have an item list (<ul>). It slides up and down using JavaScript. When it slides down, depending on number of item, it may overlap the other element (<div>), which is absolute positioned at this time (it can be changed).

How I can detect, when <ul> overlaps this <div>, to apply new style to the <div> to hide it temporary or to move it down a little bit, to prevent overlapping?
It's just not looking good, when they overlap))

Here you can see, what I'm talking about: http://timetable.raj.fvds.ru/

Thanks a lot!

解决方案

function isObjOnObj(a,b){
    var al = a.left;
    var ar = a.left+a.width;
    var bl = b.left;
    var br = b.left+b.width;

    var at = a.top;
    var ab = a.top+a.height;
    var bt = b.top;
    var bb = b.top+b.height;

    if(bl>ar || br<al){return false;}//overlap not possible
    if(bt>ab || bb<at){return false;}//overlap not possible

    if(bl>al && bl<ar){return true;}
    if(br>al && br<ar){return true;}

    if(bt>at && bt<ab){return true;}
    if(bb>at && bb<ab){return true;}

    return false;
}

这篇关于如何使用JavaScript检测元素重叠（覆盖）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！