0

Javascriptの初心者はこちら。

タイトル領域、ポートフォリオ領域、および連絡先フォームの 3 つのセクションを持つ単純な 1 ページのサイトを作成しようとしています。これらの各セクションはアンカー リンクされているため、リンクをクリックするとページがそのセクションまでスクロールします。

スペースが許せば、各セクションが水平方向と垂直方向の中央に配置されて画面いっぱいになるように、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>
4

1 に答える 1

0

試す

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

それでもうまくいかない場合は、window.addEventListener("resize",function(){...})isntead を使用してみてください。古いバージョンの IE をサポートするには、以下を確認する必要があります。if(window.addEventListener){/*standards*/window.addEventListener("resize",function(){...})}else{/*IE only*/ window.attachEvent("onresize",function(){...}

于 2013-11-14T04:19:00.913 に答える