Может кто-нибудь посоветовать, как получить значение scrollTop (которое является позицией прокрутки) iframe в iOS Safari? Мне нужно знать значение scrollTop, чтобы можно было определить, прокрутил ли пользователь нижнюю часть фрейма.
В других браузерах (например, Chrome и даже настольном Safari) я легко могу получить scrollTop iframe, используя любую из следующих строк кода (при условии, что iframe имеет ссылку на iframe):
iframe.document.documentElement.scrollTop
iframe.document.body.scrollTop
iframe.contentDocument.scrollingElement.scrollTop // Not sure if this one works
event.srcElement.documentElement.scrollTop
В iOS Safari (по крайней мере, в симуляторе) первые три всегда равны 0 (независимо от положения прокрутки), а последняя недоступна.
Вот пример кода, пытающегося достичь этого:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Playground</title>
</head>
<body>
<h1>Dev playground</h1>
<div class="iframe-wrapper">
<iframe
src="index2.html"
class="iframe"
id="iframe"
></iframe>
</div>
<script src="index.js"></script>
</body>
</html>
style.css
.iframe-wrapper {
height: 200px;
width: 90%;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
border: 5px solid black;
}
.iframe {
width: 100%;
height: 100%;
border: none;
}
index.js
const iframe = document.getElementById('iframe')
iframe.onload = () => {
console.log('iframe loaded')
const doc = iframe.contentDocument
if (doc) {
doc.onscroll = onScroll
doc.ontouchend = onScroll
}
};
function onScroll(e) {
console.log(
'iframe.contentWindow.document.documentElement.scrollTop',
iframe.contentWindow.document.documentElement.scrollTop,
'iframe.contentWindow.pageYOffset',
iframe.contentWindow.pageYOffset,
'iframe.contentWindow.document.body.scrollTop',
iframe.contentWindow.document.body.scrollTop,
'iframe.contentDocument.scrollingElement.scrollTop',
iframe.contentDocument.scrollingElement.scrollTop,
'e.srcElement.documentElement.scrollTop',
e.srcElement.documentElement.scrollTop,
)
}