Question

我有一个托管在iframe中的网页。我只能修改此页面，而不能修改包含页面。

默认情况下，我的页面滚动条被禁用，但是如果我的页面大小超过某个阈值，我需要能够打开垂直滚动条。以下代码似乎适用于所有浏览器，但Firefox：

function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}

function setScrollbar() {
    if (getDocHeight() > 5000) {
        pageBody.style.overflow = 'scroll';
    }
}

这是我的HTML：

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head><title>My title</title></head>
    <body id="pageBody" onload="setScrollbar();">
    </body>
</html>

Firefox似乎忽略了style.overflow ='scroll'。我做了很多搜索，似乎无法找到解决方案。有什么想法吗？

Answer 1

替换它：

pageBody.style.overflow = 'scroll';

用这个：

document.getElementById('pageBody').style.overflow = 'scroll';

当我在FF中检查你的代码时我得到了JS错误pageBody未定义，这应该可以解决问题：）

干杯

-G。

Answer 2

style.overflow = 'auto'应该会更好。它使浏览器决定何时自己添加滚动条。

Answer 3

不幸的是，Firefox会根据框架上的溢出样式显示框架主体上的滚动条，而不是在主体上。因此，最简单的方法是插入100％大小的无边框可滚动子帧，并在其中加载实际内容。

如果您不想这样做，那么您可以使用这样的嵌套DIV：

<body style="margin: 0px;"> <!-- override default body margin -->
  <div style="height: 100%; overflow: auto;"> <!-- The actual scrollable area -->
    <div style="margin: 8px;"> <!-- to emulate default body margin -->
      <!-- Content goes here -->
    </div>
  </div>
</body>

Firefox iframe滚动问题

3 个答案: