iPhone X documentElement.scrollHeight меняется через короткое время - PullRequest
0 голосов
/ 19 марта 2019

В настоящее время я использую 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 мне нужен setTimeout с задержкой 30 мс. На всех других устройствах, которые я пробовал, включая iPad, он работает, но не на iPhone X. РЕДАКТИРОВАТЬ: То же самое, что и на iPhone X, происходит, когда у меня Safari на iPad в режиме «картинка в картинке».

Если я не добавлю это время ожидания, фоновое вложение будет установлено для прокрутки. Я обнаружил, что 30 мс работает, пытаясь сократить время шагами. Все более 21 мс работает, а 21 мс и ниже не работают.

Добавив вывод, я обнаружил, что для моей страницы document.documentElement.scrollHeight составляет 778 сразу после загрузки и переключается на 496 после тайм-аута. document.documentElement.scrollHeight остается постоянным на уровне 635. На iPad .scrollHeight сначала 816, а затем 472, а .scrollHeight снова постоянный на 608.

Текущее решение для тайм-аута работает, и изменение фонового вложения после 30 мс не видно, но я думаю, что должно быть лучшее решение. Это ошибка, и кто-нибудь знает решение или это ошибка с моей стороны?

...