Question

我有一个在主页面上有iFrame的简单应用程序。在iFrame中是一个可滚动的div。事件发生并在iFrame内处理。这些事件的结果是新的文本行被附加到可滚动的div。

以下是父页面上的代码：

<iframe id="loggerWinR" src="../components/readium/loggerR/EPUB/xhtml/loggerR.xhtml" >
</iframe>

和CSS

#loggerWinR {
    position: absolute;
    top: 470px;
    left: 20px;
    width: 600px;
    height: 300px;
    padding:0.0em;
}

这是iFrame中托管的子页面的主体：

<body style="overflow:hidden; margin:0 0 0 0; padding:0 0 0 0;">
    <div id="loggerRDiv" style="overflow:auto"></div>

    <script src="../js/loggerR.js"></script>
</body>

这是管理子页面的JS（loggerR.js）：

function logMsg( elm, msg ) {

   elm.style.height = (window.frameElement.offsetHeight) + "px";
   var newMsg = document.createTextNode(msg);
   elm.appendChild(newMsg);
   elm.appendChild(document.createElement("br"));
   elm.scrollTop = elm.scrollHeight;
}

function handleEvent(msg) {
    logMsg( loggerRDiv, "Handler: " + “ Some new stuff here");
});

这适用于我测试的每个平台（OSX，Windows，Android等），除了iOS（8）。在iOS上，不是生成一个普通的可滚动div，而是div（可能是包含它的容器），只是越来越长，直到它超出页面底部并且可能会变成无穷大。它是一个可滚动的div（我甚至尝试过“动量”CSS设置）并且可以用手指手势滚动div。但是div只是增长和增长，让溢出变得可见。也试过溢出：滚动相同的结果。

这只是iOS的一些限制/错误还是我错过了什么？

iOS上的可滚动div不会滚动但只会永远增长

0 个答案: