Question

其他每个人似乎都希望删除IFrame的水平滚动，我想做的恰恰相反。

我有一个IFrame设置，允许我垂直向下滚动页面，但如果我想并排显示它们并横向滚动页面怎么办呢。有没有办法可以做到这一点，甚至可能吗？

我目前有以下代码使帧垂直滚动：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

    <title>button up</title>
    <!--JQUERY-->

    <script type="text/javascript">
        var iter = 1;
        var item = 10;
        var sizeframe= '1350';
        function otr() {
            document.getElementById("Iframe1").src = (item).toString() + ".html";
            document.getElementById("Iframe2").src = (item + 1).toString() + ".html";
            document.getElementById("Iframe3").src = (item + 2).toString() + ".html";
            document.getElementById("Iframe4").src = (item + 3).toString() + ".html";
        }

        function load() {
            var obj = document.getElementById("body");


            var iframe = document.createElement('iframe');
            iframe.id = 'Iframe1';
            iframe.width = '1000';
            iframe.height = sizeframe;
            obj.appendChild(iframe);

            iframe = document.createElement('iframe');
            iframe.id = 'Iframe2';
            iframe.width = '1000';
            iframe.height = sizeframe;
            obj.appendChild(iframe);

            iframe = document.createElement('iframe');
            iframe.id = 'Iframe3';
            iframe.width = '1000';
            iframe.height = sizeframe;
            obj.appendChild(iframe);

            iframe = document.createElement('iframe');
            iframe.id = 'Iframe4';
            iframe.width = '1000';
            iframe.height = sizeframe;
            obj.appendChild(iframe);

            otr();
        }

        function funcdown() {

            item += 1;
            iter++;

            var obj = document.getElementById("body");

            var iframe = document.createElement('iframe');
            iframe.id = "Iframe" + (iter + 3).toString();
            iframe.width = '1000';
            iframe.height = sizeframe;
            obj.appendChild(iframe);

            document.getElementById("Iframe" + (iter + 3).toString()).src = (item + 3).toString() + ".html";

            document.getElementById("body").removeChild(document.getElementById("Iframe" + (iter - 1).toString()));

        }

        function funcup() {

            if (item > 10 && iter > 0) {
                item -= 1;
                iter--;

                var obj = document.getElementById("body");
                obj.innerHTML = "<iframe id=\"Iframe" + iter.toString() + "\"  width=\"1000\" height=\"1350\"></iframe>" + obj.innerHTML;

                document.getElementById("Iframe" + iter.toString()).src = item.toString() + ".html";

                document.getElementById("body").removeChild(document.getElementById("Iframe" + (iter + 4).toString()));

            }
        }

        window.onload = load;
    </script>
   <!-- <script language="JavaScript1.2" src="./btn_up/jquery.js" type="text/javascript"></script>-->
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body bgcolor="#ffffff" id="body">

    <script type="text/javascript">
        $(document).ready(function () {

            $(window).scroll(function () {

                if (sizeframe * 3 < $(document).scrollTop() && item < 44) { scrollTo(0, sizeframe * 2); funcdown(); }
                if (sizeframe * 1 > $(document).scrollTop() && item > 10) { scrollTo(0, sizeframe * 2); funcup(); }
            });
        });

    </script>

</body>
</html>

编辑 - 更好地描述问题

上面的代码从一个装满html文件的大文件夹中加载和卸载iframe，在任何时候只加载最多3或4个，但它们只是垂直叠加在另一个上面。我想要相同的效果，但是页面水平滚动，而不是垂直滚动。根据用户当前正在查看的页面加载和卸载每个页面，因此如果他们正在查看页面6，则分别在页面5和7上方和下方加载，当用户向上滚动到第5页时，它将卸载第7页和页面4中的加载。我想要相同的效果，但iframe在页面上水平显示。

使IFrame在页面上滚动水平

0 个答案: