如何检查两个div是否重叠？ [复制]

Question

我试图检测我的两个 div 是否重叠。 我有一个包含文本块的 div，该 div 可以通过 buttonclick 展开和缩小。下面是另一个 div，它将被“事物”填充，直到某个点它会变成一个滚动列表。现在到棘手的部分。

这很好用，直到列表填充到最大（我无法更改）或在平板电脑上 7"。

所以我正在尝试编写一个可以检测两个 div 是否重叠的方法。 我无法在任何地方找到一个好的解决方案，可能没有，或者我没有搜索正确的东西，无论哪种方式我都需要帮助。

这是我迄今为止尝试过的：

     crashDetection(event, pageInfoBlock) {
            let helBlockTop = parseInt(document.getElementById('page-info').getBoundingClientRect().bottom, 10);
            let helBlockBottom = parseInt(document.getElementById('page-info').getBoundingClientRect().height, 10);
            let containerBottom = parseInt(document.getElementById('bottomContainer').getBoundingClientRect().top, 10);

            if (helBlockTop + helBlockBottom > containerBottom && containerBottom !== 0) {
console.log("It overlap");
            }
        }

这行得通.. 几乎是因为在某些情况下，当我向下滚动包含整个内容的 div 时，它会被拉伸，所以看起来不错.. 但是如果我再次滚动到顶部，它们会重叠.. 并且我的方法检测到重叠，即使没有..

所以我的问题是如何检测两个 div 是否重叠？ 请不要使用 JQuery，对不起我的英语不好..：P

Answer 1

function collision($div1, $div2) {
            var x1 = $div1.offset().left;
            var y1 = $div1.offset().top;
            var h1 = $div1.outerHeight(true);
            var w1 = $div1.outerWidth(true);
            var b1 = y1 + h1;
            var r1 = x1 + w1;
            var x2 = $div2.offset().left;
            var y2 = $div2.offset().top;
            var h2 = $div2.outerHeight(true);
            var w2 = $div2.outerWidth(true);
            var b2 = y2 + h2;
            var r2 = x2 + w2;
            if (b1 <= y2 || y1 >= b2 || r1 <= x2 || x1 >= r2) return false;
            return true;
        }