Question

我有一个非常奇怪的问题。 http://codepen.io/tjmediative/pen/zKjPwN

这适用于桌面浏览器，但在移动设备上根本不起作用。

function getElementVerticalInViewport (el) {
  // This gives us the vertical positioning for the element
  // This is just for jQuery compatibility
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }

  // This is your main code. getBoundingClientRect is much more efficient.
    var rect = el.getBoundingClientRect();
    //$("#mobile-text4").html("getElementVerticalInViewport="+document.getElementById("scroll-my-text").getBoundingClientRect().top);
    return rect.top;
}

滚动时，

getBoundingClientRect根本没有刷新，这是非常奇怪的行为。

注释的html注入标记是为了确保数据得到刷新。在桌面上一切都很好，但是在移动设备上，这个值会粘在一些奇怪的数字（808）上，无论div是否在视口中，它都会被触发。

编辑：我试图通过jquery修改div的内容，具体取决于它在视口中的位置。 getBoundingClientRect为我提供了检查div是否在视口中的数据，以及它相对于视口边缘的位置。这在jQuery中工作正常（检查上面的codepen链接）。但是，在移动浏览器和设备上，getBoundingClientRect在滚动时根本不会更新，因此无法将内容更改为其正确的值。看起来getBoundingClientRect是不受支持的或者是错误的，除非我使用它有什么问题，但它适用于非移动浏览器就好了。

getBoundingClientRect在移动浏览器上不刷新

0 个答案: