如何检查两个div是否重叠？

Question

我正在尝试检测我的两个div是否重叠。我有一个包含文本块的div，该div可以使用buttonclick进行扩展和缩小。这是另一个div，它将填充“事物”，直到某个点，它将变成滚动列表。现在到了棘手的部分。

在列表填满max (我不能更改)或平板电脑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;
        }