Question

下面是一些示例代码，它在页面中加载iframe，然后iframe代码使用javascript调用自动滚动 - window.scrollTo（0,170）;

在mozilla，chrome，safari等桌面浏览器上一切正常，但是当我在iPhone上试用时，滚动代码（window.scrollTo（0,170）;）不起作用。所有文件都驻留在同一台服务器上。

当它工作时，你会看到页面加载并向上滚动到第9行。当它不起作用时，页面加载但没有任何内容滚动。

关于我做错了什么或者为什么它不起作用的任何想法？提前感谢您的反馈：）

ifparent.html

<html>
    <head>
        <meta name="viewport" content="width=device-width">

        <style>
            html, body {
                margin: 0;
                padding: 0;
                height: 100%;
                width: 100%;
            }

            body {
                position: relative;
                background: #f0f0f0;
            }

            .frame_holder {
                position: absolute;
                top: 5px;
                bottom: 5px;
                left: 5px;
                right: 5px;
                background: #ffffff;
                height: 75%;

            }

            .scroll_frame {
                overflow: auto;
                overflow-x: hidden;
                -webkit-overflow-scrolling:touch;
                width: 100%;
                height: 100%;
                border: 1px solid #e0e0e0;
            }

            .my_frame {
                width: 100%;
                height: 100%;
                border: none;
                vertical-align: top;
            }

            .hidden {
                display: none;
            }
        </style>
    </head>
    <body>

        <div class="frame_holder">
            <div id="scroll_frame" class="scroll_frame">
                <iframe class="my_frame" src="iframe.html"></iframe>
            </div>
        </div>
    </body>
</html>

<script type="text/javascript">

</script>

Iframe.html的

<html>
    <head>
        <title>IFRAME</title>
    </head>

    <body  onload="scroll_window()">
        1 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        2 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        3 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        4 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        5 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        6 ELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        7 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        8 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        9 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        10 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        11 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        12 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        13 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        14 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        15 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        16 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        17 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        18 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        19 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        20 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        21 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        22 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        23 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        24 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        25 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        26 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        27 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        28 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        29 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        30 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        31 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        32 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>

        1 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        2 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        3 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        4 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        5 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        6 ELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        7 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        8 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        9 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        10 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        11 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        12 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        13 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        14 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        15 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        16 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        17 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        18 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        19 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        20 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        21 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        22 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        23 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        24 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        25 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        26 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        27 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        28 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        29 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        30 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        31 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        32 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>

        1 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        2 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        3 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        4 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        5 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        6 ELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        7 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        8 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        9 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        10 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        11 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        12 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        13 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        14 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        15 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        16 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        17 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        18 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        19 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        20 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        21 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        22 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        23 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        24 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        25 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        26 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        27 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        28 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        29 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        30 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        31 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        32 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>

        1 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        2 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        3 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        4 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        5 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        6 ELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        7 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        8 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        9 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        10 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        11 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        12 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        13 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        14 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        15 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        16 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        17 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        18 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        19 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        20 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        21 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        22 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        23 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        24 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        25 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        26 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        27 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        28 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        29 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        30 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        31 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>
        32 HELLOOOOOOOOOOOOO!!!!!!!!!!!!<br>

    </body>
</html>

<script type="text/javascript">
    function scroll_window() {
        window.scrollTo(0,170);
    }
</script>

Answer 1

我能够找到这个问题的解决方案，所以我决定发布它以防其他人遇到这个问题。以下是更改，以便滚动在iOS浏览器中也可以。

在上面的ifparent.html中添加以下代码：

<script type="text/javascript">
    window.onload = scroll_window;    

    function scroll_window() {

    //If IOS the scroll bar seemes to bee assigned to the container  div (scroll_frame) in the parent window.
    //So you need to scroll scroll_frame in the parent window. This will scroll to line 16.
    var objDiv = document.getElementById("scroll_frame");
    objDiv.scrollTop = 500;    
    }
</script>

如果 iOS ，滚动条似乎会分配给父窗口中的容器div（scroll_frame）。因此，您需要在父窗口中滚动（scroll_frame）div。这将滚动到第26行。

如果 Windows 或 Mac OS ，则滚动条似乎会分配给iframe中的窗口元素。因此，您需要在iframe中滚动iframe窗口。这将滚动到第9行。

IFrame在桌面浏览器上滚动，但在iphone上滚动

1 个答案: