当图像超出限制时，停止视差效果

Question

我正在使用stellar.js来实现我的视差。它工作正常，但我认为当图像的顶部或底部边界超出限制时可以检测到一个很好的改进（你看到图像边缘），所以当这种情况发生时，视差效应应该停止并且速度图像的滚动等于滚动速度。因此，在使用的情况下，您将永远不会看到任何图像边缘或任何图像重复（background-repeat：repeat;）我真的不知道如何实现它。如果有人可以帮助我，那就太好了。

Answer 1

您可以使用getBoundingClientRect检查图像是否到达另一个元素的顶部或底部，这会为您提供一个对象，通知相对于视口的元素边的绝对坐标。

假设有这种布局：

       topEl  
 +----------------+    
____________________
 |     image      |
____________________
 +----------------+  
      bottomEl     

JavaScript的：

var imageRect    = image.getBoundingClientRect();
var topElRect    = topEl.getBoundingClientRect();
var bottomElRect = bottomEl.getBoundingClientRect();

if (imageRect.top >= topElRect.bottom ||
    imageRect.bottom <= bottomElRect.top) {
   // Stop scrolling
}

如果您想要更精确的解释，请随时更新更多详细信息。