我有一个带有 iframe 的 HTML 页面，我需要在加载时将其内容滚动到某个位置。我的示例在大多数浏览器中运行良好，但 iOS Safari 除外——这是我真正需要的浏览器。它倾向于在第一个页面加载时在 iOS Safari 中工作，但通常之后的任何刷新都会显示滚动到顶部的 iframe 内容。
我读过有关重定向导致 #anchorname 被删除的问题，但在本例中并非如此。
真正的 iframe 内容和主页在不同的域中。我可以影响 iframe 的内容，但我无法控制它。它也用于其他目的，所以我做任何可能干扰它的自定义的能力有限。
直播链接在这里: https://s3.amazonaws.com/ios-iframe-test/iframe_test.html
这是父内容:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" name="viewport">
<style type="text/css">
#root {
position: relative;
}
#wrapper {
height: 300px;
width: 300px;
overflow-x: hidden;
overflow-y: scroll;
position: relative;
-webkit-overflow-scrolling: touch;
}
iframe {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h1>Why won't this iframe scroll to where I want?</h1>
<div id="root">
<div id="wrapper">
<iframe src="https://s3.amazonaws.com/ios-iframe-test/iframe_content.html#scrolltome"></iframe>
</div>
</div>
</body>
</html>
这是 iframe 内容:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<h1>Have some ipsum...</h1>
<p>
Lorem... (live example has much more here just to make the scrolling apparent)
</p>
<h1 style="color: red;">
<a name="scrolltome" id="scrolltome">This is where I want to scroll></a>
</h1>
<p>
Lorem...
</p>
</html>
最佳答案
这是由于 iOS Safari 错误导致 iframe 扩展到其内容的高度。您可以使用 Safari 桌面调试器并运行来验证这一点:
document.querySelector('iframe').offsetHeight
解决方案是通过将您的内容放入 position: fixed 来降低 iframe 主体的高度容器并允许它滚动。
例如，将正文的内容放入 <main>标记并设置样式如下:
<html>
<head>
<style>
main {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
z-index: 1;
}
</style>
</head>
<body>
<main>
<h1>Have some ipsum...</h1>
<p>Lorem... (live example has much more here just to make the scrolling apparent)</p>
<h1 style="color: red;">
<a name="scrolltome" id="scrolltome">This is where I want to scroll</a>
</h1>
<p>
Lorem...
</p>
</main>
</body>
</html>
这告诉 Safari iframe 主体与包含它的页面高度相同，但其内容是可滚动的。您的 anchor 现在可以工作了。
关于html - iOS Safari 不滚动以锚定在 iframe 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40307909/