javascript - 高效比较两个数字范围

Question

我正在创建一些视差滚动代码(我知道，我知道)，并且运行顺利，但是在高级用例中遇到了障碍。 Here's a demo .

现在在 Chrome、Safari 和 FF 中的速度为 60fps，非常流畅，部分原因是我只在元素处于 View 中时更新元素的位置。我使用此代码(在所述演示的 main.js 中找到)检查这一点:

a = obj.offset + obj.height - winScroll,
b = winHeight - (obj.offset - winScroll);
if ( (a <= winHeight && a >= 0) || (b <= winHeight && b >= 0) ) {

基本上，我正在检查对象是否在 View 中，如下所示:

如果 a 或 b 大于 0 但小于窗口的高度，则窗口可见。

这对于小于窗口的东西非常有效，但是对于更大的东西呢？基本上，我要做的就是获取一系列数字(窗口顶部和窗口顶部之间的所有像素+它的高度)并将其与另一个数字范围(对象的偏移量和偏移量)进行比较物体的高度+它的高度)并查看是否有相同的数字。

如何在每帧已经很拥挤的 16 毫秒内做到这一点？

Answer 1

证明(A)的一种方法是反驳(ØA)。

首先，假设对象和窗口都是矩形，每个矩形都有 4 个属性( left 、 right 、 top 、 bottom )，表示坐标系中的值。

并假设原点 O(0,0)是窗口的左上角，正 x 轴相对于原点向右延伸，正 y 轴向下延伸。

当且仅当以下陈述中至少一个为真时，该对象不可见:

• obj.left >= window.right
• obj.right <= window.left
• obj.top >= window.bottom
• obj.bottom <= window.top

将它们链接在 or 中语句，并否定该 bool 表达式的结果。