Question

看看：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中进行测试。

请注意，只有在您使用散列'＃'重新加载页面时才会出现上述情况（只是在已加载的页面中添加'＃'不会重新加载页面）。

我想知道这个的原因和可能的解决方案。

Answer 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发生之前的状态。

底部的静态iframe使网页不可滚动

1 个答案: