Question

有人可以建议如何在iOS Safari中获取iframe的scrollTop值（滚动位置）吗？我需要知道scrollTop的值才能确定用户是否已滚动到iframe的底部。

在其他浏览器（例如Chrome和台式机Safari）中，我可以使用以下任一代码行轻松获得iframe的scrollTop（假设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中（至少在Simulator中），前三个始终为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,
    )
}

iOS Safari中iframe的scrollTop始终为0

0 个答案: