Question

我对网络开发很陌生。我有一个页面在iFrame中显示另一个页面。在某些页面上，当您使用键盘或鼠标滚轮向下滚动时，即使页面向下滚动，滚动条也会粘到顶部。在其他页面上，它可以正常工作，滚动条向下移动。导致iFrame执行此操作的原因是什么？

使用iFrame链接到以下示例中使用的苹果网站时，我重新创建了同样的问题。

实施例

滚动条不起作用：

<html>
<head>
    <style> 
        *{
            margin: 0;
            padding: 0;
        }
        iframe {
            display: block;
            width: 100%;
            height: 100%;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .tcontent{
            display: block;
            width: 100%;
            height: 100%;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

         #header, #footer{
                position:fixed;
                height: 56px;
                display:block;
                width: 100%;
                background: #333;
                z-index:9;
                text-align:center;
                color: #f2f2f2;
                /*padding: 20px 0 0 0;*/
            }
    </style>
</head>
<body>
    <div class="tcontent">

        <iframe src="http://apple.com/mac/" width="100%" height="100%" frameborder="0" style="border:0" scrolling="yes"></iframe>
    </div>
    <div id="footer">
        <ul id="menu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li class="active"><a href="#">Link 5</a></li>
            <li><a href="#">Link 6</a></li>
            <li><a href="#">Link 7</a></li>
            <li><a href="#">Link 8</a></li>
            <li><a href="#">Link 9</a></li>
        </ul>
    </div>
</body>
</html>

http://jsfiddle.net/rzk4u80p/

滚动条工作：

http://jsfiddle.net/b1qqotjq/

在iframe中滚动时滚动条保持在顶部

0 个答案: