Question

我目前正在使用JS来更改CSS背景附件，具体取决于浏览器状态。如果页面是可滚动的，则背景附件应为“固定”，否则应为“滚动”。这是我的脚本：

function scrollControl() {
  if (document.documentElement.scrollHeight > document.documentElement.clientHeight){
    document.body.style.backgroundAttachment = "scroll";
  }
  else{             // else, keep bg to the bottom of the page
    document.body.style.backgroundAttachment = "fixed";
  }
}
scrollControl()                                 // Execute immediately
window.onload = setTimeout(scrollControl, 30)   // (and 30ms after pageload for iPhone X)
window.onresize = function() {scrollControl()}; // (or on resize)

问题是在iPhone X上，我需要具有30ms延迟的setTimeout。在我尝试过的所有其他设备（包括iPad）上，它都可以工作，但在iPhone X上却不起作用。 >

如果我不添加此超时，则背景附件将设置为滚动。我发现30ms可以通过尝试减少逐步执行的时间来工作。超过21ms的所有内容均有效，而低于21ms的所有内容均无效。

通过添加输出，我发现页面的document.documentElement.scrollHeight在加载后立即为778，在超时后切换为496。 document.documentElement.scrollHeight保持恒定在635。在iPad上，.scrollHeight首先是816，然后是472，而.scrollHeight再次保持在608。

当前的超时解决方案有效，并且30ms后背景附着的变化不可见，但我认为应该有一个更好的解决方案。这是一个错误，有人知道解决方案吗？或者这是我的错误？

iPhone X documentElement.scrollHeight会在短时间内改变

0 个答案: