Question

新手到Javascript这里。

我正在尝试创建一个简单的单页网站，其中包含3个部分：标题区域，投资组合区域和联系表单。这些部分中的每一部分都是锚链接的，因此当点击链接时，页面会向下滚动到该部分。

我已经使用javascript来确保每个部分都会填满屏幕，如果空间允许，则水平和垂直居中。但是，这些测量值不会在窗口大小调整时更新。

我无法确定问题，因为我的初始代码根据视口的高度控制标题的高度，在重新调整大小之前会更新，直到我添加到新行中。

这是脚本：

<script type="text/javascript">//<![CDATA[ 
        function resize()
        {
            var heights = window.innerHeight;
            var header = document.getElementById('title').offsetHeight;
            var logo = document.getElementById('logo').offsetHeight;
            var portfolioHeight = document.getElementById('portfolio-buttons').offsetHeight;
            var hireHeight = document.getElementById('hire-form').offsetHeight;
            document.getElementById('header').style.height = heights - header - logo * 0.4 + "px";
            document.getElementById('portfolio').style.padding = (heights - portfolioHeight) * 0.5 + "px 0";
            document.getElementById('hire').style.padding = (heights - hireHeight) * 0.5 + 5 + "px 0";   
        }
        resize();
        window.onresize = function() {
            resize();
        };
        //]]>
</script>

以下是相关HTML的基本结构：

<div id="portfolio">
    <div id="portfolio-buttons">
         Content here
    </div>
</div>
<div id="hire">
    <div id="hire-form">
         Content here
    </div>
</div>

编辑：要清楚，以下是用作自己脚本的行：

<script type="text/javascript">//<![CDATA[ 
        function resize()
        {
            var heights = window.innerHeight;
            var header = document.getElementById('title').offsetHeight;
            var logo = document.getElementById('logo').offsetHeight;
            document.getElementById('header').style.height = heights - header - logo * 0.4 + "px";   
        }
        resize();
        window.onresize = function() {
            resize();
        };
        //]]>
</script>

以下是有效的，但只在刷新时更新，而不是调整大小。

<script type="text/javascript">//<![CDATA[ 
        function resize()
        {
            var heights = window.innerHeight;
            var portfolioHeight = document.getElementById('portfolio-buttons').offsetHeight;
            var hireHeight = document.getElementById('hire-form').offsetHeight;
            document.getElementById('portfolio').style.padding = (heights - portfolioHeight) * 0.5 + "px 0";
            document.getElementById('hire').style.padding = (heights - hireHeight) * 0.5 + 5 + "px 0";
        }
        resize();
        window.onresize = function() {
            resize();
        };
        //]]>
</script>

Answer 1

尝试

window.onresize = function() {
            resize();
            return true;
        };

如果不起作用，请尝试使用window.addEventListener("resize",function(){...})。要支持旧版本的IE，您必须检查if(window.addEventListener){/*standards*/window.addEventListener("resize",function(){...})}else{/*IE only*/ window.attachEvent("onresize",function(){...}

Javascript在调整大小时没有响应

1 个答案: