0

看看：http: //jsfiddle.net/BUNVM/1/

<body>
    This is a test page<br/>
    (many more lines to make the page scrollable)
    This is bottom of the test page<br/>
    <iframe id="bot_frame" style="width:250px;height:240px;position:fixed;bottom:0px;right:0px;text-align:left;border:0;"></iframe>
    <script type="text/javascript">
    var iframe_content = '<!DOCTYPE html><html><body style="background-color:#ddd">Frame content</body></html>';
    window.onload = function() {
        var iframe = document.getElementById("bot_frame");
        iframe.contentWindow.document.open();
        iframe.contentWindow.document.write(iframe_content);
        iframe.contentWindow.document.close();
    };
    </script>
</body>

它在屏幕的右下角有一个静态 iframe，内容由 document.open() 和 document.write() 和 document.close() 添加到其中。

当您只打开输出帧时，一切都很好：http: //jsfiddle.net/BUNVM/1/show/

但是尝试在 Chrome 的末尾使用“#”访问相同的输出帧：http: //jsfiddle.net/BUNVM/1/show/#

现在尝试滚动页面，页面卡在底部，无法向上/向下滚动。即使拖动滚动条，按键盘上的箭头键也不起作用。但是，如果您将鼠标放在 iframe 上，然后使用鼠标滚轮/键盘滚动，则滚动会起作用。

我只能在 Ubuntu 12.04 的 Chrome v21.0.1180.89 中进行测试。

请注意，上述情况仅在您使用哈希“#”重新加载页面时发生（仅在已加载的页面中添加“#”不会重新加载页面）。

我想知道造成这种情况的原因和可能的解决方案。

4

1 回答 1

1

这是之前报告过的 chrome 中的错误：https ://code.google.com/p/chromium/issues/detail?id=102816

似乎如果您在将鼠标悬停在 iframe 上时尝试滚动将使滚动再次起作用。所以我创建了一个小技巧，即使它很丑也应该让它工作：

var offset = document.body.scrollTop || 0;
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(iframe_content);
iframe.contentWindow.document.close();

if(document.location.toString().match(/#(top)?$/)) {
    // Force a scroll on the iframe to make scrolling work again
    iframe.contentWindow.document.body.scrollTop = 0;

    // Scroll back to the original scroll position as document.close will have scrolled to the bottom
    document.body.scrollTop = offset;
}

http://jsfiddle.net/Tsq7N/

http://jsfiddle.net/Tsq7N/show/#

基本上我在 iframe 上伪造了一个滚动，这使得滚动再次成为可能，之后我将文档的 scrollTop 设置回 document.open/write/close 发生之前的状态。

于 2013-05-02T12:18:20.757 回答